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
[code language=”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>
[/code]
3.CSS: Phần định dạng CSS có nội dung:
[code language=”css”]
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;
}
[/code]