Bubble được biết đến khá nhiều nhưng hầu hết sử dụng JS Tooltip. Trên CSS cũng có nhiều site sử dụng nhưng nó chưa phổ biến lắm. Nhưng thực tế sử dụng tiện ích CSS bubble này mới đem lại nhiều hiện quả hơn vì JS Tooltip có vẻ làm tăng thời gian Load của Web.
Code CSS của thủ thuật này cũng khá ngắn gọn, trên Website hoặc Blog các bạn có thể chèn trực tiếp vào vi trí các bạn muốn.
Ở đây mình sẽ hướng dẫn thủ thuật này trên blogger vì blog này khá thân thiện với Code Web khác.
Cách làm thủ thuật:
- Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
- Dán đoạn code CSS sau đây trước thẻ </head>

<style type='text/css'>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSds-Uj2jr-k6qt594vtkdaRdhbZ8cv988RvbOVHFQAHe1Ao-9xduneWjj0hU4Hb0AxFbY8FTfzdILyv5zozokbn81rSoy04VdswI20I9Nu6IxiJINVuWtCb8jnIvu7BsWzbeCv3QTfva4/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDrsHQ8QcSOkFuDwbY4SLypJNgPYlKdkLt32zZJ-QiF_kQcU4Nfg-xjvdN1XhYEyxbsgdDAUUibfosZjW76KomWoTpsa9qwSM_sYNtEUVaqiADF9wh0RgylqCtW8M1Q8brVtHmPKxfNhf/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSds-Uj2jr-k6qt594vtkdaRdhbZ8cv988RvbOVHFQAHe1Ao-9xduneWjj0hU4Hb0AxFbY8FTfzdILyv5zozokbn81rSoy04VdswI20I9Nu6IxiJINVuWtCb8jnIvu7BsWzbeCv3QTfva4/) no-repeat bottom;
}
</style>

- Khi thêm 1 link hoặc text chữ muốn làm rõ thì bạn sử dụng cấu trúc dưới đây:

<a href="YOUR-LINK" class="tt">LINK-NAME<span class="tooltip"><span class="top"></span><span class="middle">LỜI NHẮN HIỂN THỊ THEO LINK</span><span class="bottom"></span></span></a>

Ví dụ ở DEMO trên của mình làm là:

<a href="http://itviet360.com" class="tt">itviet360.com<span class="tooltip"><span class="top"></span><span class="middle">Thủ thuật Blogger, mạng máy tính, Tự học SEO</span><span class="bottom"></span></span></a>


---

Chúc các bạn thành công!