Chú giải công cụ được sử dụng để đặt thêm thông tin. Điều này hiển thị trên trang web khi khách truy cập di chuyển con trỏ chuột qua một phần tử.
Sau đây là mã để tạo chú giải công cụ bằng 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> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
Khi di chuột lên trên dòng chữ “Di chuột qua tôi” -
