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

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

[thongbao]

  1. 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.
  2. Bạn nào muốn sử dụng javascript làm tooltip thì tham khảo bài này[/thongbao]
Hướng dẫn tạo Tooltip đơn giản bằng CSS
Tagged on: