CÁCH THỨC - Chú giải công cụ
Tìm hiểu cách tạo chú giải công cụ bằng CSS.
Di chuột qua văn bản bên dưới:
Đứng đầu
Văn bản chú giải công cụ
Đúng
Văn bản chú giải công cụ
Đáy
Văn bản chú giải công cụ
Bên trái
Văn bản chú giải công cụ
Cách tạo chú giải công cụ
Bước 1) Thêm HTML:
Thí dụ
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Bước 2) Thêm CSS:
Thí dụ
/* Tooltip container */
.tooltip {
position:
relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable
text */
}
/* Tooltip text */
.tooltip .tooltiptext
{
visibility: hidden;
width:
120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left:
50%;
margin-left: -60px;
/*
Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after
{
content: "";
position:
absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent
transparent transparent;
}
/* Show the tooltip text when
you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Mẹo: Đi tới Hướng dẫn chú giải công cụ CSS của chúng tôi để tìm hiểu thêm về chú giải công cụ.
Mẹo: Để tạo chú giải công cụ "có thể nhấp", hãy đi tới Hướng dẫn cách tạo cửa sổ bật lên của chúng tôi
Mẹo: Các chế độ cũng tương tự như chú giải công cụ. Đi tới Hướng dẫn cách tạo chế độ của chúng tôi để tìm hiểu về các chế độ.