Tips Alat W3.CSS
Arahkan kursor ke kalimat di bawah ini:
London adalah ibu kota Inggris.(9 million inhabitants)
London 9 million inhabitants adalah ibu kota Inggris.
Kelas Tooltip W3.CSS
W3.CSS menyediakan kelas tooltip berikut:
| Kelas | Mendefinisikan |
|---|---|
| w3-tooltip | Elemen tooltip |
| w3-teks | Teks tooltip |
Elemen Tooltip dan Teks Tooltip
Tooltips menampilkan teks (atau konten lain) saat Anda mengarahkan kursor ke elemen HTML.
Kelas w3-tooltip mendefinisikan elemen untuk mengarahkan kursor (wadah tooltip).
Kelas w3-text mendefinisikan teks tooltip.
Arahkan kursor ke kalimat di bawah ini:
London adalah ibu kota Inggris.(9 million inhabitants)
Contoh
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Keterangan alat sebagai Tag
Arahkan kursor ke kalimat di bawah ini:
London 9 million inhabitants adalah ibu kota Inggris.
Contoh
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Keterangan Alat Gambar
Arahkan kursor ke gambar ini untuk melihat efeknya:
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)
Contoh (teks sebelum gambar)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Contoh (teks setelah gambar)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Keterangan Alat Diposisikan Mutlak
Jika Anda ingin tooltip muncul di posisi absolut, posisikan teks tooltip dengan CSS:
Contoh
<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>
Keterangan Alat Berwarna
Jika Anda menginginkan tooltip berwarna, gunakan kelas warna w3- :
Contoh
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Keterangan Alat Bulat
Jika Anda menginginkan tooltip yang membulat, gunakan kelas w3- round :
Contoh
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Keterangan Alat Kecil
Jika Anda menginginkan tooltip kecil, gunakan kelas w3-small :
Contoh
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Tip Alat Kecil
Jika Anda menginginkan tooltip kecil, gunakan kelas w3-tiny :
Contoh
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Keterangan Alat Besar
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>