Cara menggunakan tooltip bootstrap

The Tooltip plugin kotak pop-up kecil yang muncul saat pengguna menggerakkan pointer mouse di atas unsur:

Hover over me arahkan kursor saya

Tip: Plugin dapat dimasukkan secara individual (menggunakan Bootstrap's individu "tooltip.js" file), atau sekaligus (menggunakan "bootstrap.js" atau "bootstrap.min.js" ).

Cara Membuat Tooltip a

Untuk membuat tooltip, menambahkan data-toggle="tooltip" atribut untuk elemen.

Gunakan title atribut untuk menentukan teks yang harus ditampilkan dalam tooltip:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Catatan: Tooltips harus diinisialisasi dengan jQuery: pilih elemen tertentu dan memanggil tooltip() metode.

Kode berikut akan memungkinkan semua tooltips dalam dokumen:

Contoh

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

positioning Tooltips

Secara default, tooltip akan muncul di atas elemen.

Gunakan data-placement atribut untuk mengatur posisi tooltip di atas, bawah, kiri atau sisi kanan elemen:

Contoh

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

Tip: Anda juga dapat menggunakan data-placement atribut dengan nilai "auto", yang akan membiarkan browser menentukan posisi tooltip. Misalnya, jika nilai "auto left" , tooltip akan ditampilkan pada sisi kiri bila mungkin, jika di sebelah kanan.

Menyelesaikan Bootstrap Tooltip Referensi

Untuk referensi lengkap semua pilihan tooltip, metode dan peristiwa, pergi ke kami Bootstrap JS Tooltip Referensi .

The Tooltip plugin kotak pop-up kecil yang muncul saat pengguna menggerakkan pointer mouse di atas elemen.

Untuk tutorial tentang Tooltips, baca Bootstrap Tooltip Tutorial .

Via data-* Atribut

The data-toggle="tooltip" mengaktifkan tooltip.

The title atribut menentukan teks yang harus ditampilkan dalam tooltip.

Contoh

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

via JavaScript

Tooltips tidak CSS-satunya plugin, dan karena itu harus diawali dengan jQuery: pilih elemen tertentu dan memanggil tooltip() metode.

Contoh

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();

Pilihan tooltip

Pilihan bisa dilalui melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan untuk data- , seperti dalam data-placement="" .

Menentukan apakah untuk menambahkan efek transisi CSS memudar ketika menampilkan dan menyembunyikan tooltip

Cara Membuat Tooltip Gambar dengan Bootstrap 4 - Tooltip merupakan sebuah elemen yang dapat kita gunakan untuk memberikan suatu informasi kecil berupa teks ataupun gambar. Didalam bootstrap terdapat elemen tooltip yang bisa kita gunakan dengan mudah, jika kalian pernah menggunakan tooltip bootstrap pasti sudah tau ya cara menggunakannya. Nah, kali ini saya akan bagikan tutorial sederhana tentang tooltip yang ada pada bootstrap yaitu bagaimana Cara Membuat Tooltip Gambar dengan Bootstrap 4. Buat kalian yang ingin mencoba membuat tooltip gambar kalian bisa ikuti langkah - langkahnya berikut ini.

Pada kasus kali ini tooltip dibuat dengan bootstrap 4, tentunya kalian wajib menyiapkan file bootstrapnya terlebih dahulu ya.. Kalian bisa menggunakan bootstrap secara offline ataupun online. Pada kasus yang saya buat kali ini saya menggunakan bootstrap 4 secara online.  

Setelah itu kalian bisa ketikan sintak untuk membuat tooltip gambar nya seperti berikut.

Dari sintak diatas, attribute title silahkan kalian isikan dengan tag img kemudian load gambar.

Setelah sintak diatas diketikan, selanjutnya adalah mengubah sedikit style dari tooltipnya kalian bisa tambahkan sintak CSS berikut ini.

Jika sudah kalian ketikan semua sintak diatas, simpan filenya kembali kemudian kalian bisa lihat hasil akhirnya dibrowser masing - masing. Maka akan terlihat seperti gambar berikut.

Nah, itulah Cara Membuat Tooltip Gambar dengan Bootstrap 4, semoga tutorial bootstrap tentang tooltip ini bisa bermanfaat buat kalian. Jangan lupa untuk melihat artikel lainnya di dumetschool.com. Sekian dan sampai jumpa