Tooltip dùng để hiển thị thông tin bổ sung. Nó hiện ra khi người dùng di chuột qua một phần tử.
Dưới đây là mã xây dựng tooltip với CSS:
Ví dụ
<!DOCTYPE html> <html> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; text-align: center; } .toolTip { position: relative; display: inline-block; border-bottom: 3px double rgb(255, 0, 0); } .toolTip .toolText { visibility: hidden; width: 160px; background-color: #721cd4; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; top: -35px; left: -10px; z-index: 1; } .toolTip:hover .toolText { visibility: visible; } </style> <body> <h1>Css tooltip example</h1> <div class="toolTip"> Hover over me <span class="toolText">Some toolTip text</span> </div> <h2>Hover over the above text to see the tooltip</h2> </body> </html>
Kết quả
Mã trên cho kết quả sau:
Khi di chuột qua văn bản "Hover over me":
