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.
[create_button_post thamso1=’http://nongdanit.info/demo/huong-dan-tao-tooltip-bang-css/’ thamso2=’Demo’][/create_button_post]
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]
[thongbao]
- Chỉ với vài dòng đơn giản như thế, chúng ta có thể làm cho website mình trở nên sinh động hơn mà không phải sử dụng javascript.
- Bạn nào muốn sử dụng javascript làm tooltip thì tham khảo bài này[/thongbao]