Tạo Tooltip khi rê chuột vào link

Tạo Tooltip khi rê chuột vào link. Tooltip là để khi mình rê chuột vào 1 đối tượng nào đó thì nó sẽ hiễn thị lên thông tin về nó để thông báo hoặc hướng dẫn cho người sử dụng biết mục đích, chức năng của nó.

Tooltip là những nhãn nhỏ chứa thông tin về phần tử mà khi ta rê chuột vào phần tử này thì tooltip sẽ xuất hiện,nó có chức năng tương tự như thuộc tính title trong thẻ html.

Tooltip hiện nay đã trở nên phổ biến và được sử dụng bởi tất cả các trang web lớn để mô tả một liên kết hoặc giúp đỡ trong việc hướng dẫn khi bạn chuẩn bị click vào link nào đó. Giúp bạn biết được thông tin khi click vô link đó.

DEMO
Gồm 2 thuộc tính
- CSS
- HTML
CSS

.tooltip

{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover span
{
visibility: visible;
}
.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

HTML

<a href="Liên kết" class="tooltip">
Tiêu đề
<span>Hướng dẫn hoặc thông báo</span>
</a>