Hướng dẫn tạo Tooltip đơn giản bằng CSS

Nếu bạn cần sự đơn giản và cơ bản thì Tooltip này dành cho bạn. Nó có ưu điểm là nhẹ, dễ thay đổi, và tương thích các trình duyệt.

2.HTML

<a href="#" class="tooltip> Hover<span> <img class="callout" src="http://nongdanit.info/wp-content/themes/spacious/images/callout.gif" /> <strong>Nội dung Tooltip</strong><br /> Chào mừng bạn đến Nongdanit.info</span> </a>

3.CSS: Phần định dạng CSS có nội dung:

a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
 z-index:10;display:none; padding:14px 20px;
 margin-top:10px; margin-left:28px;
 width:300px; line-height:16px;
}
a.tooltip:hover span{
 display:inline; position:absolute; color:#111;
 border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}

/*CSS3 extras*/
a.tooltip span
{
 border-radius:4px;
 box-shadow: 5px 5px 8px #CCC;
}