Panduan untuk Pemula: Bootstrap - Tips Panduan

Hai teman-teman masa depan pengembang web! Hari ini, kita akan melihat dunia yang menarik dari Bootstrap tooltips. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengantar Anda dalam perjalanan ini langkah demi langkah. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari awal dan kemudian maju. Jadi, ambil secangkir kopi (atau minuman kesukaan Anda), dan mari kita mulai!

Apa Itu Tips Panduan?

Sebelum kita masuk ke detail, mari kita memahami apa itu tips panduan. Apakah Anda pernah mengarahkan mouse Anda ke ikon atau teks di situs web dan melihat munculan kecil dengan informasi tambahan? Itu adalah tips panduan! Mereka seperti penolong kecil yang menyediakan konteks atau penjelasan tambahan tanpa membanjiri konten utama Anda.

Mengaktifkan Tips Panduan

Sekarang, mari kita meraba-raba sedikit kode. Hal pertama yang kita lakukan adalah mengaktifkan tips panduan 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 tips panduan di halaman ini!" Itu seperti menyalakan saklar lampu sebelum Anda bisa melihat di ruang gelap.

Membuat Tips Panduan

Mari kita buat tips panduan pertama kita. Itu sama mudah seperti menambahkan beberapa atribut ke elemen HTML:

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

Ini adalah apa yang terjadi:

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

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

Tips Panduan di Tautan

Tips panduan 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 tips panduan.

Tips Panduan Khusus

Sekarang, mari kita menjadi sedikit lebih kreatif. Kita dapat menyesuaikan tips panduan kita untuk membuatnya lebih menarik:

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

Dalam contoh ini, kita menambahkan data-html="true" untuk mengijinkan HTML di dalam tips panduan. Sekarang kita bisa menggunakan tag seperti <em>, <u>, dan <b> untuk menyesuaikan teks tips panduan kita.

Penempatan Tips Panduan

Kita dapat mengendalikan di mana tips panduan muncul relatif terhadap elemen kita. Mari kita cobalah semua empat posisi:

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

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

Tips Panduan dengan HTML Khusus

Ingat bagaimana kita mengijinkan HTML di dalam tips panduan 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 kesan!
</button>

Tips panduan ini termasuk header, paragraf, dan bahkan gambar! Itu seperti mini website di dalam tips panduan.

Markup

kadang-kadang, Anda mungkin ingin memiliki kontrol lebih banyak atas struktur tips panduan 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="Tips panduan khusus">
Markup tips panduan khusus
</button>

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

Tips Panduan di Elemen Nonaktif

Biasanya, elemen nonaktif tidak memicu interaksi pengguna. Tetapi dengan trik kecil, kita dapat membuat tips panduan bekerja di atas mereka:

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

Kita membungkus tombol nonaktif kita di dalam span yang dapat menerima fokus. Itu seperti memberikan penolong kepada seseorang yang tidak bisa mencapai rak atas!

Opsi

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

Opsi	Tipe	Default	Deskripsi
animation	boolean	true	Terapkan transisi CSS fade ke tips panduan
container	string | false	false	Menambahkan tips panduan ke elemen tertentu
delay	number | object	0	Tunda menampilkan dan menyembunyikan tips panduan (ms)
html	boolean	false	Ijinkan HTML di dalam tips panduan
placement	string | function	'top'	Bagaimana menempatkan tips panduan
selector	string	false	Jika penyelktor diberikan, objek tips panduan 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 tips panduan
title	string | element | function	''	Nilai judul default jika atribut title tidak ada
trigger	string	'hover focus'	Bagaimana tips panduan diperankan - click | hover | focus | manual

Anda dapat menggunakan opsi ini saat menginisialisasi tips panduan Anda:

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

Kode ini mematikan transisi fade, menambahkan penundaan, dan menempatkan tips panduan 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 praktik. Cobalah membuat halaman web dan tambahkan jenis tips panduan yang berbeda kepadanya. Eksperimen dengan opsi dan lihat apa yang Anda bisa buat.

Sebelum Anda sadar, Anda akan menjadi master tips panduan, dan halaman web Anda akan informatif dan interaktif! Selamat coding, dan jangan lupa untuk bersenang-senang dalam perjalanan!

Credits: Image by storyset