in English

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.js untuk penentuan posisi. Anda harus menyertakan popper.min.js sebelum bootstrap.js atau menggunakan bootstrap.bundle.min.js/ bootstrap.bundle.jsyang berisi Popper.js agar tooltips berfungsi!
  • Jika Anda membuat JavaScript kami dari sumber, itu memerlukanutil.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 .disabledatau disabledelemen 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.

Efek animasi komponen ini bergantung pada prefers-reduced-motionkueri 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-toggleatributnya:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Contoh

Arahkan kursor ke tautan di bawah untuk melihat tooltips:

Celana ketat keffiyeh tingkat berikutnya Anda mungkin belum pernah mendengarnya. Booth foto janggut raw denim letterpress tas kurir vegan stumptown. Seitan pertanian-ke-meja, pakaian amerika quinoa 8-bit mcsweeney's fixie berkelanjutan memiliki chambray vinil terry richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tahu biodiesel williamsburg marfa, empat loko mcsweeney membersihkan chambray vegan. Seorang seniman yang benar-benar ironis keytar apa pun , scenester farm-to-table banky Austin twitter menangani freegan cred raw denim single-origin coffee viral.

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 autodanscroll

Posisi tooltip mencoba untuk berubah secara otomatis ketika wadah induk memiliki overflow: autoatau overflow: scrollmenyukai .table-responsive, tetapi tetap mempertahankan posisi penempatan aslinya. Untuk mengatasinya, atur boundaryopsi ke apa pun selain nilai default, 'scrollParent', seperti 'window':

$('#example').tooltip({ boundary: 'window' })

Markup

Markup yang diperlukan untuk tooltip hanyalah dataatribut dan titlepada elemen HTML Anda ingin memiliki tooltip. Markup tooltip yang dihasilkan agak sederhana, meskipun memerlukan posisi (secara default, disetel topoleh 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 hoversebagai 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 disabledatribut 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-eventspada 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="".

Perhatikan bahwa untuk alasan keamanan , opsi sanitize, sanitizeFndan whiteListtidak 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: container: 'body'. Opsi ini sangat berguna karena memungkinkan Anda untuk memposisikan tooltip dalam aliran dokumen di dekat elemen pemicu - yang akan mencegah tooltip melayang menjauh dari elemen pemicu selama pengubahan ukuran jendela.
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:delay: { "show": 500, "hide": 100 }
html boolean Salah

Izinkan HTML di tooltip.

Jika benar, tag HTML di tooltip titleakan dirender di tooltip. Jika salah, metode jQuery textakan digunakan untuk memasukkan konten ke dalam DOM.

Gunakan teks jika Anda khawatir tentang serangan XSS.
penempatan string | fungsi 'atas'

Bagaimana memposisikan tooltip - otomatis | atas | bawah | kiri | Baik.
Ketika autoditentukan, itu akan secara dinamis mengarahkan ulang tooltip.

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 thisdiatur ke contoh tooltip.
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.ondukungan). 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 titleakan disuntikkan ke dalam .tooltip-inner.

.arrowakan menjadi panah tooltip.

Elemen pembungkus terluar harus memiliki .tooltipkelas dan role="tooltip".
judul string | elemen | fungsi ''

Nilai judul default jika titleatribut tidak ada.

Jika suatu fungsi diberikan, itu akan dipanggil dengan thisreferensi yang disetel ke elemen yang dilampirkan tooltip.
pemicu rangkaian 'arahkan fokus'

Bagaimana tooltip dipicu - klik | melayang | fokus | manual. Anda dapat melewati beberapa pemicu; pisahkan dengan spasi.

'manual'menunjukkan bahwa tooltip akan dipicu secara terprogram melalui .tooltip('show'), .tooltip('hide')dan .tooltip('toggle')metode; nilai ini tidak dapat digabungkan dengan pemicu lainnya.

'hover'dengan sendirinya akan menghasilkan tooltips yang tidak dapat dipicu melalui keyboard, dan hanya boleh digunakan jika ada metode alternatif untuk menyampaikan informasi yang sama untuk pengguna keyboard.
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.

Untuk informasi lebih lanjut, lihat dokumen offset Popper.js .
fallbackPenempatan string | Himpunan 'Balik' Izinkan untuk menentukan posisi mana yang akan digunakan Popper saat mundur. Untuk informasi lebih lanjut, lihat dokumen perilaku Popper.js
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.js .
membersihkan boolean BENAR Mengaktifkan atau menonaktifkan sanitasi. Jika diaktifkan 'template'dan 'title'opsi akan dibersihkan.
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.js default Bootstrap, lihat konfigurasi Popper.js

Atribut data untuk masing-masing tooltips

Opsi untuk masing-masing tooltip secara alternatif dapat ditentukan melalui penggunaan atribut data, seperti yang 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.tooltipevent 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.tooltipevent 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.tooltipatau hidden.bs.tooltipperistiwa 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 showmetode 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 hidemetode instance telah dipanggil.
tersembunyi.bs.tooltip Peristiwa ini dipicu ketika tooltip telah selesai disembunyikan dari pengguna (akan menunggu transisi CSS selesai).
dimasukkan.bs.tooltip Acara ini dipicu setelah show.bs.tooltipacara ketika template tooltip telah ditambahkan ke DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})