ในการสร้าง Tooltip ด้วย CSS โค้ดมีดังนี้ −
ตัวอย่าง
<!DOCTYPE html> <html> <style> body { text-align: center; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; font-size: 20px; font-weight: bolder; color: blue; } .tooltip .toolText { visibility: hidden; width: 120px; background-color: rgb(89, 166, 255); color: #fff; text-align: center; border-radius: 6px; padding: 10px 20px; font-weight: normal; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip .toolText::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .toolText { visibility: visible; opacity: 1; } </style> <body> <h1>Tooltip Example</h1> <div class="tooltip"> Hover Here <span class="toolText">Some Random Text</span> </div> <p>Hover over the above text to see tooltip in action</p> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
เมื่อวางเมาส์เหนือข้อความ "Hover over me" −
