Tooltip ใช้สำหรับแสดงข้อมูลเพิ่มเติม จะมองเห็นได้เมื่อผู้เยี่ยมชมวางเมาส์เหนือองค์ประกอบ
นี่คือโค้ดสำหรับการสร้าง Tooltip โดยใช้ CSS −
ตัวอย่าง
<!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>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
เมื่อวางเมาส์เหนือข้อความ "Hover over me" −
