Chú giải công cụ CSS
Tạo chú giải công cụ với CSS.
Demo: 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ử:
Thí 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>
Giải thích ví dụ
HTML: Sử dụng một phần tử vùng chứa (như <div>) và thêm
"tooltip"lớp vào nó. 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 một phần tử nội tuyến (như <span>) với class="tooltiptext".
CSS: Việc tooltipsử dụng lớp position:relative, cần thiết để định vị văn bản chú giải công cụ ( position:absolute).
Lưu ý: Xem các ví dụ dưới đây về cách định vị chú giải công cụ.
Lớp tooltiptextnày chứa văn bản chú giải công cụ thực tế. Nó bị ẩ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 trắng, văn bản căn giữa và phần đệm trên và dưới 5px.
Thuộc tính CSS border-radiusđượ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ộ :hoverchọn đượ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> với 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 chuyển" (<div>). Cũng lưu ý rằng nó 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ó, cũng đồng thời tăng giá trị của thuộc toptính để đảm bảo rằng nó ở 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 margin-lefttính có giá trị là âm 60 pixel. Điều này là căn giữa chú giải công cụ trên / dưới văn bản có thể lưu trữ. Nó được đặt thành 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" vào sau chú giải công cụ, với lớp phần tử giả ::aftercùng với thuộc content
tính. Bản thân mũi tên được tạo bằng cách sử dụng các đường viền. Điều này sẽ làm cho chú giải công cụ trông giống như bong bóng thoại.
Ví dụ này trình bày cách thêm một 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ả:
Giải thích ví dụ
Định vị 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 border-widthtính chỉ định kích thước của mũi tên. Nếu bạn thay đổi điều này, cũng thay đổi margin-leftgiá trị tương tự. Điều này sẽ giữ cho 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 thành trong suốt. Nếu tất cả các mặt đều màu đen, bạn sẽ có một hộp hình vuông màu đen.
Ví dụ này trình bày cách thêm một mũi tên vào đầu chú giải công cụ. Lưu ý rằng chúng tôi đặt màu đường viền dưới cùng lần này:
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 trình bày 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ột mũi tên vào bên phải của 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ờ trong chú giải công cụ (Hoạt ảnh)
Nếu bạn muốn làm mờ văn bản chú giải công cụ khi nó sắp được hiển thị, bạn có thể sử dụng thuộc tính CSS transitioncùng với thuộc opacity
tính và chuyển từ chế độ ẩn hoàn toàn sang hiển thị 100%, trong một số giây cụ thể (1 giây trong thí dụ):
Thí dụ
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}