Keterangan alat

Ringkasan

Hal-hal yang perlu diketahui saat menggunakan plugin tooltip:

• Tooltips mengandalkan perpustakaan pihak ketiga Popper untuk pemosisian. Anda harus menyertakan popper.min.js sebelum bootstrap.js, atau menggunakan bootstrap.bundle.min.jsyang berisi Popper.
• 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

Seperti disebutkan di atas, Anda harus menginisialisasi tooltips sebelum dapat digunakan. Salah satu cara untuk menginisialisasi semua tooltips pada halaman adalah dengan memilihnya berdasarkan data-bs-toggleatributnya, seperti:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Tooltips pada tautan

Arahkan kursor ke tautan di bawah untuk melihat tooltips:

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Tip alat khusus

Anda dapat menyesuaikan tampilan tooltips menggunakan variabel CSS . Kami menetapkan kelas khusus dengan data-bs-custom-class="custom-tooltip"cakupan tampilan khusus kami dan menggunakannya untuk mengganti variabel CSS lokal.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Petunjuk arah

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Dengan SVG:

CSS

Variabel

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, tooltips sekarang menggunakan variabel CSS lokal .tooltipuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Variabel Sass

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

Penggunaan

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

Picu tooltip melalui JavaScript:

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

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Pilihan

Karena opsi dapat diteruskan melalui atribut data atau JavaScript, Anda dapat menambahkan nama opsi ke data-bs-, seperti pada data-bs-animation="{value}". Pastikan untuk mengubah jenis huruf dari nama opsi dari “ camelCase ” menjadi “ kebab-case ” saat meneruskan opsi melalui atribut data. Misalnya, gunakan data-bs-custom-class="beautifier"alih-alih data-bs-customClass="beautifier".

Pada Bootstrap 5.2.0, semua komponen mendukung atribut data cadangan eksperimentaldata-bs-config yang dapat menampung konfigurasi komponen sederhana sebagai string JSON. Ketika suatu elemen memiliki data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang terpisah akan menimpa nilai yang diberikan pada data-bs-config. Selain itu, atribut data yang ada dapat menampung nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Menggunakan fungsi denganpopperConfig

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

Metode

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Acara

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()