Keterangan alat
Dokumentasi dan contoh untuk menambahkan tooltips Bootstrap kustom dengan CSS dan JavaScript menggunakan CSS3 untuk animasi dan atribut data untuk penyimpanan judul lokal.
Ringkasan
Hal-hal yang perlu diketahui saat menggunakan plugin tooltip:
- Tooltips mengandalkan perpustakaan pihak ke-3 Popper untuk pemosisian. Anda harus menyertakan popper.min.js sebelum bootstrap.js atau menggunakan
bootstrap.bundle.min.js
/bootstrap.bundle.js
yang berisi Popper agar tooltips berfungsi! - Jika Anda membuat JavaScript kami dari sumber, itu memerlukan
util.js
. - Tooltips diikutsertakan karena alasan kinerja, jadi Anda harus menginisialisasinya sendiri .
- Tooltips dengan judul tanpa panjang tidak pernah ditampilkan.
- Tentukan
container: 'body'
untuk menghindari masalah rendering dalam komponen yang lebih kompleks (seperti grup input, grup tombol, dll.). - Memicu tooltips pada elemen tersembunyi tidak akan berfungsi.
- Tooltips untuk
.disabled
ataudisabled
elemen harus dipicu pada elemen pembungkus. - Saat dipicu dari hyperlink yang menjangkau beberapa baris, tooltips akan dipusatkan. Gunakan
white-space: nowrap;
di<a>
s Anda untuk menghindari perilaku ini. - Tooltips harus disembunyikan sebelum elemen terkaitnya dihapus dari DOM.
- Tooltips dapat dipicu berkat elemen di dalam shadow DOM.
prefers-reduced-motion
kueri media. Lihat bagian
pengurangan gerakan pada dokumentasi aksesibilitas kami .
Punya semua itu? Bagus, mari kita lihat bagaimana mereka bekerja dengan beberapa contoh.
Contoh: Aktifkan tooltips di mana-mana
Salah satu cara untuk menginisialisasi semua tooltips pada halaman adalah dengan memilihnya berdasarkan data-toggle
atributnya:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Contoh
Arahkan kursor ke tautan di bawah untuk melihat tooltips:
Teks placeholder untuk mendemonstrasikan beberapa tautan sebaris dengan tooltips. Ini sekarang hanya pengisi, bukan pembunuh. Konten ditempatkan di sini hanya untuk meniru keberadaan teks asli . Dan semua itu hanya untuk memberi Anda gambaran tentang bagaimana tooltips akan terlihat saat digunakan dalam situasi dunia nyata. Jadi semoga Anda sekarang telah melihat bagaimana tooltips pada tautan ini dapat bekerja dalam praktik, setelah Anda menggunakannya di situs atau proyek Anda sendiri .
Arahkan kursor ke tombol di bawah untuk melihat empat arah tooltips: atas, kanan, bawah, dan kiri.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Dan dengan HTML khusus ditambahkan:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Penggunaan
Plugin tooltip menghasilkan konten dan markup sesuai permintaan, dan secara default menempatkan tooltips setelah elemen pemicunya.
Picu tooltip melalui JavaScript:
$('#example').tooltip(options)
Meluap auto
danscroll
Posisi tooltip mencoba untuk berubah secara otomatis ketika wadah induk memiliki overflow: auto
atau overflow: scroll
menyukai .table-responsive
, tetapi tetap mempertahankan posisi penempatan aslinya. Untuk mengatasinya, atur boundary
opsi ke apa pun selain nilai default, 'scrollParent'
, seperti 'window'
:
$('#example').tooltip({ boundary: 'window' })
Markup
Markup yang diperlukan untuk tooltip hanyalah data
atribut dan title
pada elemen HTML Anda ingin memiliki tooltip. Markup tooltip yang dihasilkan agak sederhana, meskipun memerlukan posisi (secara default, disetel top
oleh plugin).
Membuat tooltips berfungsi untuk keyboard dan pengguna teknologi bantu
Anda hanya boleh menambahkan tooltips ke elemen HTML yang secara tradisional berfokus pada keyboard dan interaktif (seperti tautan atau kontrol formulir). Meskipun elemen HTML arbitrer (seperti <span>
s) dapat dibuat fokus dengan menambahkan tabindex="0"
atribut, ini akan menambahkan penghentian tab yang berpotensi mengganggu dan membingungkan pada elemen non-interaktif untuk pengguna keyboard, dan sebagian besar teknologi pendukung saat ini tidak mengumumkan tooltip dalam situasi ini. Selain itu, jangan hanya mengandalkan hover
sebagai pemicu untuk tooltip Anda, karena ini akan membuat tooltip Anda tidak mungkin dipicu untuk pengguna keyboard.
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Elemen yang dinonaktifkan
Elemen dengan disabled
atribut tidak interaktif, artinya pengguna tidak dapat memfokuskan, mengarahkan, atau mengkliknya untuk memicu tooltip (atau popover). Sebagai solusinya, Anda ingin memicu tooltip dari wrapper <div>
atau <span>
, idealnya membuat keyboard-focusable using tabindex="0"
, dan menimpa pointer-events
pada elemen yang dinonaktifkan.
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Pilihan
Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-
, seperti pada data-animation=""
.
sanitize
,
sanitizeFn
dan
whiteList
tidak dapat diberikan menggunakan atribut data.
Nama | Jenis | Bawaan | Keterangan |
---|---|---|---|
animasi | boolean | BENAR | Terapkan transisi fade CSS ke tooltip |
wadah | string | elemen | Salah | Salah | Menambahkan tooltip ke elemen tertentu. Contoh: |
menunda | nomor | obyek | 0 | Penundaan menampilkan dan menyembunyikan tooltip (ms) - tidak berlaku untuk tipe pemicu manual Jika nomor diberikan, penundaan diterapkan pada kedua sembunyikan/tampilkan Struktur objek adalah: |
html | boolean | Salah | Izinkan HTML di tooltip. Jika benar, tag HTML di tooltip Gunakan teks jika Anda khawatir tentang serangan XSS. |
penempatan | string | fungsi | 'atas' | Bagaimana memposisikan tooltip - otomatis | atas | bawah | kiri | Baik. Ketika sebuah fungsi digunakan untuk menentukan penempatan, itu dipanggil dengan simpul DOM tooltip sebagai argumen pertamanya dan simpul DOM elemen pemicu sebagai yang kedua. Konteks |
pemilih | string | Salah | Salah | Jika pemilih disediakan, objek tooltip akan didelegasikan ke target yang ditentukan. Dalam praktiknya, ini juga digunakan untuk menerapkan tooltips ke elemen DOM yang ditambahkan secara dinamis ( jQuery.on dukungan). Lihat ini dan contoh yang informatif . |
templat | rangkaian | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
HTML dasar untuk digunakan saat membuat tooltip. Tooltip
Elemen pembungkus terluar harus memiliki |
judul | string | elemen | fungsi | '' | Nilai judul default jika Jika suatu fungsi diberikan, itu akan dipanggil dengan |
pemicu | rangkaian | 'arahkan fokus' | Bagaimana tooltip dipicu - klik | melayang | fokus | manual. Anda dapat melewati beberapa pemicu; pisahkan dengan spasi.
|
mengimbangi | nomor | string | fungsi | 0 | Offset tooltip relatif terhadap targetnya. Ketika suatu fungsi digunakan untuk menentukan offset, itu dipanggil dengan objek yang berisi data offset sebagai argumen pertamanya. Fungsi harus mengembalikan objek dengan struktur yang sama. Node DOM elemen pemicu dilewatkan sebagai argumen kedua. |
fallbackPenempatan | string | Himpunan | 'Balik' | Izinkan untuk menentukan posisi mana yang akan digunakan Popper saat mundur. Untuk informasi lebih lanjut, lihat dokumen perilaku Popper |
kelas khusus | string | fungsi | '' | Tambahkan kelas ke tooltip saat ditampilkan. Perhatikan bahwa kelas-kelas ini akan ditambahkan sebagai tambahan untuk setiap kelas yang ditentukan dalam template. Untuk menambahkan beberapa kelas, pisahkan dengan spasi: Anda juga dapat melewatkan fungsi yang seharusnya mengembalikan string tunggal yang berisi nama kelas tambahan. |
batas | string | elemen | 'scrollInduk' | Batas kendala overflow dari tooltip. Menerima nilai 'viewport' , 'window' , 'scrollParent' , atau referensi HTMLElement (khusus JavaScript). Untuk informasi lebih lanjut, lihat dokumen preventOverflow Popper . |
membersihkan | boolean | BENAR | Mengaktifkan atau menonaktifkan sanitasi. Jika diaktifkan 'template' dan 'title' opsi akan dibersihkan. Lihat bagian pembersih dalam dokumentasi JavaScript kami . |
daftar putih | obyek | Nilai default | Objek yang berisi atribut dan tag yang diizinkan |
membersihkanFn | nol | fungsi | batal | Di sini Anda dapat menyediakan fungsi sanitasi Anda sendiri. Ini dapat berguna jika Anda lebih suka menggunakan perpustakaan khusus untuk melakukan sanitasi. |
popperConfig | nol | obyek | batal | Untuk mengubah konfigurasi Popper default Bootstrap, lihat konfigurasi Popper |
Atribut data untuk masing-masing tooltips
Opsi untuk masing-masing tooltip secara alternatif dapat ditentukan melalui penggunaan atribut data, seperti dijelaskan di atas.
Metode
Metode dan transisi asinkron
Semua metode API tidak sinkron dan memulai transisi . Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir . Selain itu, pemanggilan metode pada komponen transisi akan diabaikan .
Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut .
$().tooltip(options)
Melampirkan penangan tooltip ke koleksi elemen.
.tooltip('show')
Mengungkapkan tooltip elemen. Kembali ke pemanggil sebelum tooltip benar-benar ditampilkan (yaitu sebelum shown.bs.tooltip
event terjadi). Ini dianggap sebagai pemicu "manual" dari tooltip. Tooltips dengan judul tanpa panjang tidak pernah ditampilkan.
$('#element').tooltip('show')
.tooltip('hide')
Menyembunyikan tooltip elemen. Kembali ke pemanggil sebelum tooltip benar-benar disembunyikan (yaitu sebelum hidden.bs.tooltip
event terjadi). Ini dianggap sebagai pemicu "manual" dari tooltip.
$('#element').tooltip('hide')
.tooltip('toggle')
Mengalihkan tooltip elemen. Kembali ke pemanggil sebelum tooltip benar-benar ditampilkan atau disembunyikan (yaitu sebelum shown.bs.tooltip
atau hidden.bs.tooltip
peristiwa terjadi). Ini dianggap sebagai pemicu "manual" dari tooltip.
$('#element').tooltip('toggle')
.tooltip('dispose')
Menyembunyikan dan menghancurkan tooltip elemen. Tooltips yang menggunakan delegasi (yang dibuat menggunakan opsi selector
) tidak dapat dimusnahkan satu per satu pada elemen pemicu turunan.
$('#element').tooltip('dispose')
.tooltip('enable')
Memberikan tooltip elemen kemampuan untuk ditampilkan. Tooltips diaktifkan secara default.
$('#element').tooltip('enable')
.tooltip('disable')
Menghapus kemampuan tooltip elemen untuk ditampilkan. Tooltip hanya akan dapat ditampilkan jika diaktifkan kembali.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Mengalihkan kemampuan tooltip elemen untuk ditampilkan atau disembunyikan.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Memperbarui posisi tooltip elemen.
$('#element').tooltip('update')
Acara
Jenis Acara | Keterangan |
---|---|
show.bs.tooltip | Acara ini langsung aktif ketika show metode instance dipanggil. |
ditampilkan.bs.tooltip | Peristiwa ini dipicu ketika tooltip telah dibuat terlihat oleh pengguna (akan menunggu transisi CSS selesai). |
hide.bs.tooltip | Acara ini dipecat segera ketika hide metode instance telah dipanggil. |
tersembunyi.bs.tooltip | Acara ini dipicu ketika tooltip telah selesai disembunyikan dari pengguna (akan menunggu transisi CSS selesai). |
dimasukkan.bs.tooltip | Peristiwa ini dipicu setelah show.bs.tooltip peristiwa ketika template tooltip telah ditambahkan ke DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})