Thêm Tooltip hướng dẫn cho link khi rê chuột đến

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 đỡ nhiều hơn về thông tin trên một phần của bài viết.Khi bạn sử dụng các sản phẩm của Google, bạn sẽ thấy một dấu hỏi nhỏ mà bạn có thể di chuột qua để xem một cửa sổ pop up với một vài điều hướng dẫn. Bài viết này sẽ hướng dẫn bạn làm được điều đó ngay trên blog của mình. Hãy xem demo sau đó làm theo các bước hướng dẫn đơn giản bên dưới

Demo

Thêm css vào blog của bạn

1. Vào Blogger > Mẫu > Tùy chỉnh
2. Nâng cao > Add CSS sau đó dán code sau vào rồi Lưu lại

.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;
}

• Bạn có thể tùy chỉnh mầu theo sở thích ở các đoạn được bôi màu xanh ở code trên, tham khảo mã màu tại đây 

Thêm Tooltip  cho bài viết

Bạn sử dụng code bên dưới để thêm Tooltip  cho bài viết

<a href="#" class="tooltip">
Troll VL
<span>Blog Chia Sẻ-Thủ Thuật-Fun</span>
</a>

Rất đơn giản phải không? Chúc blog của bạn ngày càng thành công hơn, đừng quên để lại comments góp ý cho mình nhé! Cảm ơn!