Keterangan alat

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.jsyang berisi Popper agar tooltips berfungsi!
• Tooltips disertakan 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;pada <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.

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-bs-toggleatributnya:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Contoh

Arahkan kursor ke tautan di bawah untuk melihat tooltips:

Arahkan kursor ke tombol di bawah untuk melihat empat arah tooltips: atas, kanan, bawah, dan kiri. Arah dicerminkan saat menggunakan Bootstrap di RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Dan dengan HTML khusus ditambahkan:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Dengan SVG:

Kelancangan

Variabel

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

Penggunaan

Plugin tooltip menghasilkan konten dan markup sesuai permintaan, dan secara default menempatkan tooltips setelah elemen pemicunya.

Picu tooltip melalui JavaScript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

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).

<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-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 kursor, atau mengkliknya untuk memicu tooltip (atau popover). Sebagai solusinya, Anda ingin memicu tooltip dari wrapper <div>atau <span>, idealnya membuat keyboard-focusable menggunakan tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-bs-, seperti pada data-bs-animation="". Pastikan untuk mengubah jenis kasus dari nama opsi dari camelCase ke kebab-case saat meneruskan opsi melalui atribut data. Misalnya, alih-alih menggunakan data-bs-customClass="beautifier", gunakan data-bs-custom-class="beautifier".

Menggunakan fungsi denganpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Metode

menunjukkan

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.

tooltip.show()

bersembunyi

Menyembunyikan tooltip elemen. Kembali ke pemanggil sebelum tooltip benar-benar disembunyikan (yaitu sebelum hidden.bs.tooltipevent terjadi). Ini dianggap sebagai pemicu "manual" dari tooltip.

tooltip.hide()

beralih

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.

tooltip.toggle()

membuang

Menyembunyikan dan menghancurkan tooltip elemen (Menghapus data yang tersimpan di elemen DOM). Tooltips yang menggunakan delegasi (yang dibuat menggunakan opsi selector) tidak dapat dimusnahkan satu per satu pada elemen pemicu turunan.

tooltip.dispose()

memungkinkan

Memberikan tooltip elemen kemampuan untuk ditampilkan. Tooltips diaktifkan secara default.

tooltip.enable()

cacat

Menghapus kemampuan tooltip elemen untuk ditampilkan. Tooltip hanya akan dapat ditampilkan jika diaktifkan kembali.

tooltip.disable()

toggleDiaktifkan

Mengalihkan kemampuan tooltip elemen untuk ditampilkan atau disembunyikan.

tooltip.toggleEnabled()

memperbarui

Memperbarui posisi tooltip elemen.

tooltip.update()

dapatkan Instance

Metode statis yang memungkinkan Anda untuk mendapatkan contoh tooltip yang terkait dengan elemen DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Metode statis yang memungkinkan Anda mendapatkan instance tooltip yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Acara

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()