Tạo Tool-Tip Text cho WebPages chỉ với CSS

[B-Boy Static]

Demo online: http://champi.info/demo/css-tooltip-demo.htm

B1: Bạn chỉ cần khai báo mã CSS như sau:

<style>
a.tooltip{ position:relative; text-decoration: none; }
a.tooltip span{ display: none; }
a.tooltip:hover span{ display:block; position:absolute; top:20px; left:20px; padding: 5px;
width:200px; border:1px solid #000; background-color:#FFFFAA; color:#000; }
</style>

B2: Trong phần body hiển thị nội dung ban viết như sau:

<a href="http://champi.info" class="tooltip">Champi.info<span>Chia sẻ giao Lưu kết bạn <br> và cùng phát triển boblog <br> Chúc bạn một ngày vui vẻ</span></a>

Có 2 điểm cần chú ý ở đây là
1. class="tooltip" : để khai báo class cho link
2. SPAN : chứa nội dung hiển thị khi rê chuột vào link.