Tooltips

Ihtisar

Hal-hal anu kedah terang nalika nganggo plugin tooltip:

• Tooltips ngandelkeun perpustakaan pihak ka-3 Popper pikeun positioning. Anjeun kedah ngalebetkeun popper.min.js sateuacan bootstrap.js atanapi nganggo bootstrap.bundle.min.js/ bootstrap.bundle.jsanu ngandung Popper supados tooltip tiasa dianggo!
• 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 unsur 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.

Conto: Aktipkeun tooltips dimana-mana

Salah sahiji cara pikeun ngamimitian sadaya tooltip dina halaman nyaéta milih ku data-bs-toggleatributna:

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

Contona

Hover dina tumbu di handap pikeun ningali tooltips:

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

Sareng ditambah HTML khusus:

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

Kalayan SVG:

Sass

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;

Pamakéan

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

Micu tooltip via 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 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" 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 maké 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

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-bs-, sapertos dina data-bs-animation="". Pastikeun pikeun ngarobah tipe kasus tina ngaran pilihan tina camelCase ka kebab-kasus nalika ngalirkeun pilihan ngaliwatan atribut data. Contona, tinimbang ngagunakeun data-bs-customClass="beautifier", make data-bs-custom-class="beautifier".

Ngagunakeun fungsi kalawanpopperConfig

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

Métode

nempokeun

Nembongkeun tooltip unsur. Mulih ka nu nelepon saméméh tooltip sabenerna geus ditémbongkeun (ie saméméh shown.bs.tooltipacara lumangsung). Ieu dianggap "manual" pemicu tooltip. Tooltips kalawan judul nol-panjangna pernah ditémbongkeun.

tooltip.show()

nyumput

Nyumputkeun tooltip unsur. Mulih ka panelepon saméméh tooltip sabenerna disumputkeun (ie saméméh hidden.bs.tooltipacara lumangsung). Ieu dianggap "manual" pemicu tooltip.

tooltip.hide()

togél

Toggles tooltip hiji unsur. Mulih ka nu nelepon saméméh tooltip sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.tooltipatawa hidden.bs.tooltipkajadian lumangsung). Ieu dianggap "manual" pemicu tooltip.

tooltip.toggle()

miceun

Nyumputkeun sareng ngancurkeun tooltip unsur (Ngahapus data anu disimpen dina unsur DOM). Tooltips nu make delegasi (anu dijieun maké pilihanselector ) teu bisa individual ancur dina elemen pemicu turunan.

tooltip.dispose()

ngaktifkeun

Méré tooltip hiji unsur kamampuhan pikeun dipintonkeun. Tooltips diaktipkeun sacara standar.

tooltip.enable()

mareuman

Ngaleungitkeun kamampuan pikeun nunjukkeun tooltip unsur. Tooltip ngan bakal tiasa ditingalikeun upami diaktipkeun deui.

tooltip.disable()

toggleDiaktipkeun

Toggles kamampuhan pikeun tooltip unsur pikeun ditémbongkeun atawa disumputkeun.

tooltip.toggleEnabled()

apdet

Ngamutahirkeun posisi tooltip hiji unsur.

tooltip.update()

getInstance

Metodeu statik anu ngamungkinkeun anjeun kéngingkeun conto tooltip anu aya hubunganana sareng unsur DOM

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

getOrCreateInstance

Métode statik anu ngamungkinkeun anjeun kéngingkeun conto tooltip anu aya hubunganana sareng unsur DOM, atanapi ngadamel anu énggal upami henteu diinisialisasi.

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

Kajadian

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

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

tooltip.hide()