Bootstrap - Tooltips: Panduan untuk Pemula

Hai teman-teman masa depan pengembang web! Hari ini, kita akan mendalam ke dunia yang menakjubkan Bootstrap tooltips. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya disini untuk mengarahkan Anda dalam perjalanan ini langkah demi langkah. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari awal dan naik turun. Jadi, ambil secangkir kopi (atau minuman favorit Anda), dan mari kita mulai!

Apa Itu Tooltips?

Sebelum kita melompat ke hal yang lebih rinci, mari kita memahami apa itu tooltips. Apakah Anda pernah mengarahkan mouse Anda ke ikon atau teks di situs web dan melihat pop-up kecil dengan informasi tambahan? Itu adalah tooltip! Mereka seperti pembantu kecil yang menyediakan konteks atau penjelasan ekstra tanpa membuang konten utama Anda.

Mengaktifkan Tooltips

Sekarang, mari kita meraba-raba sedikit kode. Hal pertama yang kita lakukan adalah mengaktifkan tooltips di Bootstrap. Jangan khawatir; itu lebih mudah daripada yang Anda pikirkan!

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

Skrip kecil ini memberitahu Bootstrap, "Hai, kita ingin menggunakan tooltips di halaman ini!" Itu seperti menyalakan saklar lampu sebelum Anda bisa melihat di ruangan gelap.

Membuat Tooltips

Mari kita buat tooltip pertama kita. Itu sama mudahnya menambahkan beberapa atribut ke elemen HTML:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Saya adalah tooltip!">
Hover di atas saya
</button>

Ini apa yang terjadi:

• Kita membuat tombol menggunakan kelas btn dan btn-secondary Bootstrap.
• data-toggle="tooltip" memberitahu Bootstrap bahwa elemen ini harus memiliki tooltip.
• title="Saya adalah tooltip!" adalah teks yang akan muncul di tooltip kita.

Ketika Anda mengarahkan mouse ke tombol ini, Anda akan melihat "Saya adalah tooltip!" muncul. Magic, kan?

Tooltips di Tautan

Tooltips tidak hanya untuk tombol. Mari kita tambahkan satu ke tautan:

<a href="#" data-toggle="tooltip" title="Klik saya untuk pergi ke sana!">Hover di atas tautan ini</a>

Ini bekerja sama seperti contoh tombol kita. Ketika Anda mengarahkan mouse ke tautan, Anda akan melihat pesan tooltip.

Tooltips Khusus

Sekarang, mari kita sedikit lebih keren. Kita dapat menyesuaikan tooltips kita untuk membuatnya lebih menarik:

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true"
title="<em>Tooltip</em> <u>dengan</u> <b>HTML</b>">
Hover untuk tooltip HTML
</button>

Dalam contoh ini, kita menambahkan data-html="true" untuk mengizinkan HTML di tooltip kita. Sekarang kita dapat menggunakan tag seperti <em>, <u>, dan <b> untuk menggaya teks tooltip kita.

Posisi Tooltips

Kita dapat mengontrol di mana tooltip muncul relatif terhadap elemen kita. Mari kita coba semua empat posisi:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip atas">
Tooltip di atas
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip kanan">
Tooltip di kanan
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip bawah">
Tooltip di bawah
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip kiri">
Tooltip di kiri
</button>

Atribut data-placement memberitahu Bootstrap di mana untuk menempatkan tooltip. Itu seperti memberitahu teman Anda di mana untuk berdiri dalam foto!

Tooltip dengan HTML Khusus

Ingat bagaimana kita mengizinkan HTML di tooltip sebelumnya? Mari kita perluangkan itu lebih jauh:

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true"
title="<h3>Header Khusus</h3><p>Ini adalah paragraf.</p><img src='smiley.gif' alt='Wajah senyum'>">
Hover untuk keseruan!
</button>

Tooltip ini termasuk header, paragraf, dan bahkan gambar! Itu seperti halaman mini di dalam tooltip Anda.

Markup

kadang-kadang, Anda mungkin ingin memiliki kendali lebih banyak atas struktur tooltip Anda. Itu di mana markup khusus masuk:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="Tooltip khusus">
Markup tooltip khusus
</button>

Contoh ini menggunakan atribut data-template untuk menentukan struktur khusus untuk tooltip kita. Itu seperti membangun rumah daripada membeli yang siap pakai!

Tooltip di Elemen Non-Aktif

Biasanya, elemen non-aktif tidak memicu interaksi pengguna. Tetapi dengan trik kecil, kita dapat membuat tooltips bekerja di atasnya:

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Tooltip non-aktif">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Tombol non-aktif</button>
</span>

Kita membungkus tombol non-aktif dalam span yang dapat menerima fokus. Itu seperti memberikan helper ke orang yang tidak bisa mencapai rak atas!

Opsi

Akhirnya, mari kita lihat beberapa opsi yang kita dapat gunakan untuk menyesuaikan tooltips kita lebih jauh:

Opsi	Tipe	Default	Deskripsi
animation	boolean	true	Terapkan transisi CSS fade ke tooltip
container	string | false	false	Menambahkan tooltip ke elemen tertentu
delay	number | object	0	Delay menampilkan dan menyembunyikan tooltip (ms)
html	boolean	false	Izinkan HTML di tooltip
placement	string | function	'top'	Bagaimana menempatkan tooltip
selector	string	false	Jika pemilihan diberikan, objek tooltip akan didelegasikan ke target yang ditentukan
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	HTML dasar yang digunakan saat membuat tooltip
title	string | element | function	''	Nilai judul default jika atribut title tidak ada
trigger	string	'hover focus'	Bagaimana tooltip dipicu - click | hover | focus | manual

Anda dapat menggunakan opsi ini saat menginisialisasi tooltips Anda:

$('#example').tooltip({
animation: false,
delay: { "show": 500, "hide": 100 },
placement: 'right'
});

Kode ini mematikan transisi fade, menambahkan delay, dan menempatkan tooltip di sebelah kanan elemen.

Dan itu saja! Anda baru saja mengambil langkah pertama Anda ke dunia Bootstrap tooltips. Ingat, kunci untuk menguasai ini (dan konsep coding lainnya) adalah latihan. Cobalah membuat halaman web dan tambahkan jenis tooltip yang berbeda kepadanya. Eksperimen dengan opsi dan lihat apa yang Anda bisa buat.

Sebelum Anda sadar, Anda akan menjadi master tooltip, dan halaman web Anda akan informatif dan interaktif! Selamat coding, dan jangan lupa untuk bersenang-senang di jalannya!

Credits: Image by storyset