Chú giải công cụ CSS
Tạo chú giải công cụ bằng CSS.
Bản trình diễn: Ví dụ về chú giải công cụ
Chú giải công cụ thường được sử dụng để chỉ định thông tin bổ sung về điều gì đó khi người dùng di chuyển con trỏ chuột qua một phần tử:
Chú giải công cụ cơ bản
Tạo chú giải công cụ xuất hiện khi người dùng di chuyển chuột qua một phần tử:
Ví dụ
<style>
/* 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: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip"> Hover
over me
<span class="tooltiptext"> Tooltip
text </span>
</div> Hãy tự mình thử »Ví dụ giải thích
HTML: Sử dụng phần tử vùng chứa (như <div>) và thêm lớp "tooltip" vào phần tử đó. Khi người dùng di chuột qua <div> này, nó sẽ hiển thị văn bản chú giải công cụ.
Văn bản chú giải công cụ được đặt bên trong phần tử nội tuyến (như <span>) với class="tooltiptext" .
CSS: Lớp chú tooltip sử dụng position:relative , cần thiết để định vị văn bản chú giải công cụ ( position:absolute ). Lưu ý: Xem ví dụ bên dưới về cách định vị chú giải công cụ.
Lớp văn bản tooltiptext chứa văn bản chú giải công cụ thực tế. Nó được ẩn theo mặc định và sẽ hiển thị khi di chuột (xem bên dưới). Chúng tôi cũng đã thêm một số kiểu cơ bản cho nó: chiều rộng 120px, màu nền đen, màu văn bản màu trắng, văn bản ở giữa và khoảng đệm trên và dưới 5px.
Thuộc tính border-radius CSS được sử dụng để thêm các góc tròn vào văn bản chú giải công cụ.
Bộ chọn :hover được sử dụng để hiển thị văn bản chú giải công cụ khi người dùng di chuyển chuột qua <div> bằng class="tooltip" .
Chú giải công cụ định vị
Trong ví dụ này, chú giải công cụ được đặt ở bên phải ( left:105% ) của văn bản "có thể di chuột" (<div>). Cũng lưu ý rằng top:-5px được sử dụng để đặt nó ở giữa phần tử vùng chứa của nó. Chúng tôi sử dụng số 5 vì văn bản chú giải công cụ có phần đệm trên và dưới là 5px. Nếu bạn tăng phần đệm của nó, hãy tăng giá trị của thuộc tính top để đảm bảo rằng nó nằm ở giữa (nếu đây là thứ bạn muốn). Điều tương tự cũng áp dụng nếu bạn muốn chú giải công cụ được đặt ở bên trái.
Chú giải công cụ bên phải
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Kết quả:
Chú giải công cụ bên trái
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Kết quả:
Nếu bạn muốn chú giải công cụ xuất hiện ở trên cùng hoặc dưới cùng, hãy xem các ví dụ bên dưới. Lưu ý rằng chúng tôi sử dụng thuộc tính margin-left có giá trị âm 60 pixel. Điều này nhằm căn giữa chú giải công cụ bên trên/bên dưới văn bản có thể di chuột. Nó được đặt bằng một nửa chiều rộng của chú giải công cụ (120/2 = 60).
Chú giải công cụ hàng đầu
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Kết quả:
Chú giải công cụ dưới cùng
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Kết quả:
Mũi tên chú giải công cụ
Để tạo một mũi tên xuất hiện từ một phía cụ thể của chú giải công cụ, hãy thêm nội dung "trống" sau chú giải công cụ, với lớp phần tử giả ::after cùng với thuộc tính content . Bản thân mũi tên được tạo bằng cách sử dụng đường viền. Điều này sẽ làm cho chú giải công cụ trông giống như một bong bóng lời thoại.
Ví dụ này minh họa cách thêm mũi tên vào cuối chú giải công cụ:
Mũi tên dưới cùng
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Kết quả:
Ví dụ giải thích
Đặt mũi tên bên trong chú giải công cụ: top: 100% sẽ đặt mũi tên ở cuối chú giải công cụ. left: 50% sẽ căn giữa mũi tên.
Lưu ý: Thuộc tính border-width chỉ định kích thước của mũi tên. Nếu bạn thay đổi điều này, hãy thay đổi giá trị margin-left thành như cũ. Điều này sẽ giữ mũi tên ở giữa.
border-color được sử dụng để chuyển đổi nội dung thành một mũi tên. Chúng tôi đặt đường viền trên cùng thành màu đen và phần còn lại trong suốt. Nếu tất cả các cạnh đều màu đen thì bạn sẽ có một hộp hình vuông màu đen.
Ví dụ này minh họa cách thêm một mũi tên vào đầu chú giải công cụ. Lưu ý rằng lần này chúng tôi đặt màu đường viền dưới cùng:
Mũi tên trên cùng
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Kết quả:
Ví dụ này minh họa cách thêm một mũi tên vào bên trái của chú giải công cụ:
Mũi tên trái
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Kết quả:
Ví dụ này minh họa cách thêm mũi tên vào bên phải chú giải công cụ:
Mũi tên bên phải
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Kết quả:
Làm mờ dần chú giải công cụ (Hoạt hình)
Nếu bạn muốn làm mờ văn bản chú giải công cụ khi nó sắp hiển thị, bạn có thể sử dụng thuộc tính transition CSS cùng với thuộc tính opacity và chuyển từ chế độ ẩn hoàn toàn sang hiển thị 100%, trong một số giây được chỉ định (1 giây trong ví dụ của chúng tôi):
Ví dụ
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} Hãy tự mình thử »