Tooltips

Ihtisar

Hal-hal anu kedah terang nalika nganggo plugin tooltip:

• Tooltips ngandelkeun perpustakaan pihak katilu Popper pikeun positioning. Anjeun kedah ngalebetkeun popper.min.js sateuacan bootstrap.js, atanapi nganggo bootstrap.bundle.min.jsanu ngandung Popper.
• Tooltips dipilih pikeun alesan kinerja, jadi Anjeun kudu initialize aranjeunna sorangan .
• Tooltips kalawan judul nol-panjangna pernah ditémbongkeun.
• Sebutkeun container: 'body'pikeun nyegah masalah rendering dina komponén anu langkung kompleks (sapertos grup input kami, grup tombol, jsb).
• Triggering tooltips on elemen disumputkeun moal jalan.
• Tooltips pikeun .disabledatawa disabledelemen kudu dipicu dina elemen wrapper.
• Lamun dipicu tina hyperlinks nu bentang sababaraha garis, tooltips bakal dipuseurkeun. Paké white-space: nowrap;on <a>s anjeun ulah kabiasaan ieu.
• Tooltips kudu disumputkeun saméméh elemen pakait maranéhanana geus dihapus tina DOM.
• Tooltips tiasa dipicu ku unsur dina DOM kalangkang.

Ngagaduhan sadayana éta? Hébat, hayu urang tingali kumaha aranjeunna damel sareng sababaraha conto.

Contona

Aktipkeun tooltips

Sakumaha didadarkeun di luhur, anjeun kedah ngamimitian tooltip sateuacan tiasa dianggo. Salah sahiji cara pikeun ngamimitian sadaya tooltip dina halaman nyaéta milih ku data-bs-toggleatributna, sapertos kieu:

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

Tooltips on Tumbu

Hover dina tumbu di handap pikeun ningali 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>

tooltips custom

Anjeun tiasa nyaluyukeun tampilan tooltips nganggo variabel CSS . Urang nyetel kelas custom kalawan data-bs-custom-class="custom-tooltip"wengkuan penampilan custom urang jeung make eta pikeun override 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>

Pitunjuk

Hover dina tombol di handap pikeun ningali opat arah tooltips: luhur, katuhu, handap, jeung kénca. Arah dicerminkeun nalika nganggo 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>

Sareng ditambah HTML khusus:

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

Kalayan SVG:

CSS

Variabel

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, tooltips ayeuna nganggo variabel CSS lokal .tooltippikeun ningkatkeun kustomisasi sacara real-time. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

  --#{$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

Pamakéan

Plugin tooltip ngahasilkeun eusi sareng markup dumasar kana paménta, sareng sacara standar nempatkeun tooltip saatos unsur pemicuna.

Micu tooltip via 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 anu diperyogikeun pikeun tooltip ngan ukur dataatribut sareng titledina unsur HTML anjeun hoyong gaduh tooltip. Markup anu dihasilkeun tina tooltip rada saderhana, sanaos peryogi posisi (sacara standar, disetel topku 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>

Unsur ditumpurkeun

Unsur-unsur anu gaduh disabledatribut henteu interaktif, hartosna pangguna henteu tiasa museurkeun, hover, atanapi klik aranjeunna pikeun memicu tooltip (atanapi popover). Salaku workaround a, Anjeun bakal hoyong pemicu tooltip ti wrapper <div>atawa <span>, idéal dijieun keyboard-focusable ngagunakeun 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

Salaku pilihan bisa diliwatan via atribut data atawa JavaScript, anjeun bisa append hiji ngaran pilihan pikeun data-bs-, sakumaha dina data-bs-animation="{value}". Pastikeun pikeun ngarobah tipe kasus tina ngaran pilihan tina " camelCase " pikeun " kebab-case " nalika ngalirkeun pilihan ngaliwatan atribut data. Contona, make data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Salaku Bootstrap 5.2.0, sadaya komponén ngarojong hiji atribut data ditangtayungan eksperimendata-bs-config nu bisa imah konfigurasi komponén basajan salaku string JSON. Lamun hiji unsur boga data-bs-config='{"delay":0, "title":123}'jeung data-bs-title="456"atribut, nilai final titlebakal 456jeung atribut data misah bakal override nilai dibikeun dina data-bs-config. Salaku tambahan, atribut data anu aya tiasa ngeusian nilai JSON sapertos data-bs-delay='{"show":0,"hide":150}'.

Ngagunakeun fungsi kalawanpopperConfig

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

Métode

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

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

Kajadian

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

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

tooltip.hide()