Tooltips menampilkan teks (atau konten lain) ketika Anda membawa lebih dari sebuah elemen HTML.
Inline Tooltip Text
Arahkan kursor kalimat di bawah ini!
London 9 juta adalah ibu kota Inggris.
Kelas w3-tooltip mendefinisikan elemen HTML untuk mengarahkan kursor (tooltip kontainer).
Kelas w3-teks mendefinisikan teks tooltip:
Contoh
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p> Cobalah sendiri " Inline Tooltip Tag
Arahkan kursor kalimat di bawah ini!
London 9 juta adalah ibu kota Inggris.
Kelas w3-tooltip mendefinisikan elemen HTML untuk mengarahkan kursor (tooltip kontainer).
Kelas w3-teks mendefinisikan teks tooltip:
Contoh
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p> Cobalah sendiri " Tooltip besar
Arahkan kursor ke atas gambar ini untuk melihat efek:
Sebuah mobil adalah roda, self-powered kendaraan bermotor yang digunakan untuk transportasi. Sebagian besar definisi dari istilah menetapkan bahwa mobil biasanya memiliki empat roda. (Wikipedia)
Kelas w3-tooltip mendefinisikan elemen HTML untuk mengarahkan kursor (tooltip kontainer).
Kelas w3-teks mendefinisikan teks tooltip:
Contoh (teks sebelum gambar)
<div class="w3-tooltip">
<p
class="w3-text">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)</p>
<img src="img_car.jpg"
alt="Car" style="width:100%">
</div> Cobalah sendiri " Contoh (teks setelah gambar)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car" style="width:100%">
<p
class="w3-text">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)</p>
</div> Cobalah sendiri " Tooltip mutlak
Jika Anda ingin tooltip muncul di posisi absolut, posisi teks tooltip (w3-teks):
Contoh
<p class="w3-tooltip">London is the capital city
of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p> Cobalah sendiri " berwarna Tooltip
Jika Anda ingin tooltip berwarna, menggunakan kelas w3-warna:
Tooltip bulat
Jika Anda ingin tooltip bulat, gunakan kelas w3-bulat:
Tooltip kecil
Jika Anda ingin tooltip kecil, menggunakan kelas w3-kecil:
Tooltip kecil
Jika Anda ingin tooltip kecil, menggunakan kelas w3-kecil:
Tooltip besar
Jika Anda ingin tooltip besar, menggunakan kelas w3-besar: