W3.CSS Tooltip
Di chuột qua các câu bên dưới:
London là thủ đô của nước Anh.(9 million inhabitants)
London 9 million inhabitants là thủ đô của nước Anh.
Các lớp chú giải công cụ W3.CSS
W3.CSS cung cấp các lớp chú giải công cụ sau:
| Lớp học | Xác định |
|---|---|
| w3-tooltip | Phần tử chú giải công cụ |
| w3-text | Văn bản chú giải công cụ |
Phần tử chú giải công cụ và văn bản chú giải công cụ
Chú giải công cụ hiển thị văn bản (hoặc nội dung khác) khi bạn di chuột qua một phần tử HTML.
Lớp w3-tooltip xác định phần tử để di chuột qua (vùng chứa chú giải công cụ).
Lớp w3-text xác định văn bản chú giải công cụ.
Di chuột qua câu bên dưới:
London là thủ đô của nước Anh.(9 million inhabitants)
Thí dụ
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Chú giải công cụ dưới dạng thẻ
Di chuột qua câu bên dưới:
London 9 million inhabitants là thủ đô của nước Anh.
Thí dụ
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Chú giải công cụ hình ảnh
Di chuột qua ảnh này để xem hiệu ứng:
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)
Ví dụ (văn bản trước hình ảnh)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Ví dụ (văn bản sau hình ảnh)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Chú giải công cụ được định vị tuyệt đối
Nếu bạn muốn chú giải công cụ xuất hiện ở vị trí tuyệt đối, hãy định vị văn bản chú giải công cụ bằng CSS:
Thí dụ
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
Chú giải công cụ có màu
Nếu bạn muốn chú giải công cụ có màu, hãy sử dụng các lớp màu w3 :
Thí dụ
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Chú giải công cụ làm tròn
Nếu bạn muốn một chú giải công cụ được làm tròn, hãy sử dụng các lớp w3- round :
Thí dụ
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Chú giải công cụ nhỏ
Nếu bạn muốn một chú giải công cụ nhỏ, hãy sử dụng lớp w3-small :
Thí dụ
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Chú giải công cụ nhỏ
Nếu bạn muốn có một chú giải công cụ nhỏ, hãy sử dụng lớp w3-tiny :
Thí dụ
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Chú giải công cụ lớn
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
Animated Tooltip
If you want to fade in the tooltip, use the w3-animate-opacity class:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>