CSS Tooltip
- Previous Page CSS Animation
- Next Page CSS Image Style
Tạo chú thích (Tooltip) bằng CSS.
Hình ảnh minh họa: Chú thích
Example
Khi người dùng di chuột qua yếu tố, chú thích thường được sử dụng để cung cấp thông tin thêm về nội dung đó:
Chú thích cơ bản
Tạo một chú thích hiển thị khi di chuột qua yếu tố:
Example
<style>
/* Khung chứa chú thích */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Nếu cần hiển thị đường chấm tròn dưới văn bản có thể di chuột qua */
}
/* Văn bản chú thích */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Định vị văn bản chú thích - hãy xem ví dụ dưới đây */
position: absolute;
z-index: 1;
}
/* Khi di chuột qua khung chứa chú thích, hiển thị văn bản chú thích */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
ví dụ giải thích
HTML:
sử dụng phần tử chứa (ví dụ như <div>) và thêm "tooltip" Lớp. Khi người dùng di chuột trỏ đến <div> này, văn bản công cụ提示 sẽ hiển thị.
Văn bản công cụ提示 nằm trong class="tooltiptext" Các phần tử được nhúng (như <span>) trong.
CSS:
tooltip Lớp sử dụng position:relativedùng để đặt văn bản công cụ提示 (position:absolute）。Lưu ý: Để biết cách đặt công cụ提示, hãy xem ví dụ dưới đây.
tooltiptext Lớp lưu trữ văn bản công cụ提示 thực tế. Mặc định, nó ẩn và sẽ hiển thị khi di chuột trỏ (xem thêm ở dưới). Chúng tôi cũng đã thêm một số樣式 cơ bản: chiều rộng 120 pixel, nền đen, văn bản trắng, văn bản căn giữa và viền trong trên dưới là 5px.
CSS border-radius Thuộc tính để thêm góc tròn cho văn bản công cụ提示.
Khi người dùng di chuột đến <div> có class="tooltip",:hover Chọn器 để hiển thị văn bản công cụ提示.
Đặt công cụ提示
Trong ví dụ này, công cụ提示 nằm ở bên phải của văn bản có thể trượt (left:105%）。Và hãy chú ý thêm rằngtop:-5px để đặt nó ở giữa của phần tử chứa. Chúng tôi sử dụng số 5 vì nội dung văn bản của công cụ提示 có viền trên dưới là 5px. Nếu bạn tăng viền trong, xin vui lòng tăng cùng top Giá trị của thuộc tính để đảm bảo rằng nó ở giữa. Nếu bạn muốn đặt công cụ提示 ở bên trái, điều này cũng áp dụng.
Công cụ提示 ở bên phải
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Result:
Công cụ提示 ở bên trái
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Result:
Nếu bạn muốn công cụ提示 ở trên hoặc dưới, hãy xem ví dụ dưới đây. Lưu ý rằng chúng tôi đã sử dụng thuộc tính margin-left âm 60 pixel. Điều này để căn giữa công cụ提示 với văn bản có thể trượt. Giá trị này là một nửa chiều rộng của công cụ提示 (120/2 = 60).
Công cụ提示 ở trên
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Sử dụng một nửa chiều rộng (120/2 = 60), để căn giữa công cụ提示 */
}
Result:
Công cụ提示 ở dưới
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Sử dụng một nửa chiều rộng (120/2 = 60), để căn giữa công cụ提示 */
}
Result:
Mũi tên công cụ提示
Nếu bạn muốn tạo mũi tên hiển thị ở bên cạnh chỉ định của công cụ提示, hãy thêm nội dung 'trống' sau công cụ提示 và sử dụng lớp ảo element ::after và content thuộc tính. Mũi tên本身 được tạo ra bằng viền. Điều này sẽ làm cho công cụ gợi ý trông như một bong bóng.
ví dụ này minh họa cách thêm mũi tên dưới cùng vào công cụ gợi ý:
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;
}
Result:
ví dụ giải thích
để định vị mũi tên trong công cụ gợi ý:top: 100% để đặt mũi tên ở dưới cùng của công cụ gợi ý.left: 50% sẽ làm cho mũi tên được căn giữa.
lưu ý:border-width thuộc tính xác định kích thước của mũi tên. Nếu bạn thay đổi cài đặt này, cũng hãy thay đổi margin-left giá trị thay đổi thành cùng giá trị. Điều này sẽ làm cho mũi tên được căn giữa.
border-color để chuyển đổi nội dung thành mũi tên. Chúng ta sẽ thiết lập viền trên thành màu đen và còn lại là trong suốt. Nếu tất cả các mặt đều là màu đen, cuối cùng sẽ nhận được một khung vuông màu đen.
ví dụ này minh họa cách thêm mũi tên trên cùng vào công cụ gợi ý. Lưu ý, lần này chúng ta đã thiết lập màu viền dưới:
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;
}
Result:
ví dụ này minh họa cách thêm mũi tên bên trái vào công cụ gợi ý:
mũi tên bê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;
}
Result:
ví dụ này minh họa cách thêm mũi tên bên phải vào công cụ gợi ý:
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;
}
Result:
Fade-in Tooltip (Animation)
If you want to fade in and out of the tooltip text that will be displayed soon, you can use CSS transition property with opacity When used together, the properties change from completely invisible to 100% visible within the specified number of seconds (in the example, 1 second):
Example
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Previous Page CSS Animation
- Next Page CSS Image Style
