Chú giải công cụ W3.CSS
Di chuột qua các câu dưới đây:
London ( 9 triệu dân ) là thủ đô của nước Anh.
London 9 triệu dân 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 | Định nghĩa |
---|---|
chú giải công cụ w3 | Phần tử chú giải công cụ |
văn bản w3 | 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 phần tử HTML.
Lớp w3-tooltip xác định phần tử cần di chuột qua (thùng chứa chú giải công cụ).
Lớp văn bản w3 xác định văn bản chú giải công cụ.
Di chuột qua câu dưới đây:
London ( 9 triệu dân ) là thủ đô của nước Anh.
Ví dụ
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Hãy tự mình thử »Chú giải công cụ dưới dạng thẻ
Di chuột qua câu dưới đây:
London 9 triệu dân là thủ đô của nước Anh.
Ví dụ
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Hãy tự mình thử » Chú giải công cụ hình ảnh
Di chuột qua hình ảnh này để xem hiệu ứng:
Ô tô là một loại phương tiện có động cơ tự động, có bánh xe được sử dụng để vận chuyển. Hầu hết các định nghĩa về thuật ngữ này đều xác định rằng ô tô thường có bốn bánh. (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>
Hãy tự mình thử »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>
Hãy tự mình thử »Chú giải công 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:
Ví 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>
Hãy tự mình thử »Chú giải công cụ màu
Nếu bạn muốn có một chú giải công cụ có màu, hãy sử dụng các lớp màu w3- :
Chú giải công cụ làm tròn
Nếu bạn muốn có một chú giải công cụ được làm tròn, hãy sử dụng các lớp w3- round :
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-small :
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 :
Chú giải công cụ lớn
Nếu bạn muốn có một chú giải công cụ lớn, hãy sử dụng các lớp w3- lớn :
Chú giải công cụ hoạt hình
Nếu bạn muốn làm mờ chú giải công cụ, hãy sử dụng lớp w3-animate-opacity :
Ví dụ
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>
Hãy tự mình thử »