tutorial pengembangan web terbaru
 

Bootstrap JS Tooltip

❮ Sebelumnya Berikutnya Referensi ❯

JS Tooltip (tooltip.js)

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>
Cobalah sendiri "

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();
Cobalah sendiri "

Pilihan tooltip

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

Nama Mengetik kegagalan Deskripsi Cobalah
animationbooleantrue

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

  • true - Tambahkan efek memudar
  • false - Jangan menambahkan efek memudar
Cobalah
wadah string, atau palsu boolean Salah Menambahkan tooltip untuk elemen tertentu.
Contoh: kontainer: 'body' 		Cobalah
delaynumber, or object0 Menentukan jumlah milidetik yang diperlukan untuk menampilkan dan menyembunyikan tooltip.

Untuk menentukan penundaan untuk menunjukkan dan satu lagi untuk bersembunyi, menggunakan struktur objek:

delay: {show: 500, hide: 100} - yang akan membawa 500 ms untuk menunjukkan tooltip , tetapi hanya 100 ms untuk menyembunyikannya 		Cobalah
htmlboolean false Menentukan apakah menerima tag HTML dalam tooltip:
  • true - Terima tag HTML
  • false - Jangan menerima tag HTML
Catatan: HTML harus dimasukkan dalam atribut judul (atau menggunakan pilihan judul).

Bila diatur ke false (default), jQuery's text() metode yang akan digunakan. Gunakan ini jika Anda khawatir tentang serangan XSS 		Cobalah
placementstring"top" Menentukan posisi tooltip. Kemungkinan nilai:

  • "top" - Tooltip di atas
  • "bottom" - Keterangan alat di bagian bawah
  • "left" - Tooltip di sebelah kiri
  • "right" - Tooltip di sebelah kanan
  • "auto" - Mari browser menentukan posisi tooltip. Misalnya, jika nilai "auto left" , tooltip akan ditampilkan pada sisi kiri bila mungkin, jika di sebelah kanan. Jika nilai "auto bottom" , tooltip akan menampilkan di bagian bawah bila memungkinkan, jika tidak di atas
Cobalah
selectorstring, or the boolean falsefalse Menambahkan tooltip untuk pemilih yang ditentukan Cobalah
templatestring  HTML dasar untuk digunakan saat membuat tooltip.

Judul tooltip akan dimasukkan ke elemen memiliki kelas .tooltip-inner dan unsur dengan kelas .tooltip-arrow akan menjadi panah tooltip ini.

Unsur wrapper terluar harus memiliki .tooltip kelas.
titlestring"" Menentukan teks yang harus ditampilkan dalam tooltip Cobalah
triggerstring"hover focus" Menentukan bagaimana tooltip dipicu. Kemungkinan nilai:

  • "click" - Memicu tooltip dengan klik
  • "hover" - Memicu tooltip di hover
  • "focus" - Memicu tooltip ketika mendapat fokus (dengan memfokuskan atau mengklik .eg)
  • "manual" - Memicu tooltip secara manual
Tip: Untuk lulus beberapa nilai, pisahkan dengan spasi 		Cobalah
viewportstring, or object{selector: "body", padding: 0} Membuat tooltip dalam batas-batas elemen ini.

Contoh: viewport: '#viewport' atau {selector: '#viewport', padding: 0}

Metode tooltip

Tabel berikut berisi metode tooltip semua tersedia.

metode Deskripsi Cobalah
.tooltip( options ) Mengaktifkan tooltip dengan opsi. Lihat pilihan di atas nilai-nilai yang valid Cobalah
.tooltip("show") Menunjukkan tooltip Cobalah
.tooltip("hide") Menyembunyikan tooltip Cobalah
.tooltip("toggle") Matikan tooltip Cobalah
.tooltip("destroy") Menyembunyikan dan menghancurkan tooltip Cobalah

Acara tooltip

Tabel berikut berisi peristiwa tooltip semua tersedia.

Peristiwa Deskripsi Cobalah
show.bs.tooltip Terjadi ketika tooltip akan segera ditampilkan Cobalah
shown.bs.tooltip Terjadi ketika tooltip sepenuhnya ditampilkan (setelah transisi CSS telah selesai) Cobalah
hide.bs.tooltip Terjadi ketika tooltip akan segera disembunyikan Cobalah
hidden.bs.tooltip Terjadi ketika tooltip sepenuhnya tersembunyi (setelah transisi CSS telah selesai) Cobalah
contoh

contoh

Desain Tooltip kustom

Gunakan CSS untuk menyesuaikan tampilan tooltip:

Contoh

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
Cobalah sendiri "

❮ Sebelumnya Berikutnya Referensi ❯