[HD]Tạo tooltip đơn giản không cần Javascript

Tooltip này rất dễ thực hiện, bạn chỉ cần đặt title cho thẻ a và thêm class="tooltip", nó sẽ tự động chuyển sang tooltip cho bạn. Và đây là phần HTML.

1. HTML

Code:

<div class="container"><h2>Tạo tooltip đơn giản không cần dùng javascript - 2Cwebvn</h2>   
    <p class="back"><a href="http://www.2cweb.vn/news/html-css/tao-tooltip-don-gian-khong-can-javascript-10-24.html" class="tooltip" title="Back to 2Cwebvn">Trở lại bài viết để xem hướng dẫn chi tiết</a></p>
    <p class="exam">Example Tooltip: <a href="#" class="tooltip" title="Beautiful tooltip - 2Cwebvn">Hover Me</a></p>
</div>

2. CSS

Code:

body {background: url(background_2cwebvn.png); text-align:center; }
div.container{
    margin: 50px auto;
    width: 700px;
}
 
.tooltip {
    display: inline;
    position: relative;
}
 
.tooltip:hover {
    color: #c00;
    text-decoration: none;
}
 
.tooltip:hover:after {
    background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(51,51,51,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(51,51,51,1)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
    background: linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#333333',GradientType=0 );   
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
    border-radius: 3px;
    bottom: 2.35em;
    color: #fff;
    content: attr(title);
    font-size: 12px;
    display: block;
    left: 1em;
    padding: 8px 20px;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}
 
.tooltip:hover:before {
    width: 10px;
    height: 10px;
    background: rgba(51,51,51,1);
    -webkit-transform: rotate(45deg);
    box-shadow: 1px 1px 0px 0px rgba(0,0,0,1);
    bottom: 1.5em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}
 
a.tooltip:link{
    color:#DB2E66;
    text-decoration:none;
}
 
a.tooltip:visited{
    color:#DB2E66;
    text-decoration:none;
}
 
a.tooltip:hover{
    color:#999;
    text-decoration:none;
}
p.back{margin-top:20px;}
p.exam{
   
    color:#646464;
    line-height:1.5;
    display: block;
    width: 180px;
    margin:150px auto 0px;
}

Vậy là ta đã có tooltip rồi đấy bạn, thật dễ làm đúng không nào? Bạn có thể thực hiện tooltip để chú thích điều gì đó cho các link khi người dùng hover vào.

Kết luận

Bạn có thích bài hướng dẫn này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!