Tooltips

Ringkesan

Sing kudu dingerteni nalika nggunakake plugin tooltip:

• Tooltips gumantung ing Popper perpustakaan pihak katelu kanggo posisi. Sampeyan kudu nyakup popper.min.js sadurunge bootstrap.js utawa nggunakake bootstrap.bundle.min.js/ bootstrap.bundle.jssing ngemot Popper supaya tooltip bisa digunakake!
• Tooltips dipilih kanggo alasan kinerja, dadi sampeyan kudu miwiti dhewe .
• Tooltips karo judhul nol-dawa ora tau ditampilake.
• Nemtokake container: 'body'kanggo ngindhari masalah rendering ing komponen sing luwih rumit (kayata grup input, grup tombol, lsp).
• Triggering tooltips ing unsur didhelikake ora bakal bisa.
• Tooltips kanggo .disabledutawa disabledunsur kudu micu ing unsur wrapper.
• Nalika dipicu saka hyperlinks sing mbentang sawetara baris, tooltips bakal tengah. Gunakake white-space: nowrap;ing <a>s kanggo supaya prilaku iki.
• Tooltips kudu didhelikake sadurunge unsur sing cocog wis dibusak saka DOM.
• Tooltips bisa micu thanks kanggo unsur nang bayangan DOM.

Wis kabeh iku? Apik, ayo ndeleng cara kerjane karo sawetara conto.

Conto: Aktifake tooltip ing endi wae

Salah siji cara kanggo miwiti kabeh tooltip ing kaca yaiku milih kanthi data-bs-toggleatribut:

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

Tuladha

Tutul ing pranala ing ngisor iki kanggo ndeleng tooltips:

Tutul ing tombol ing ngisor iki kanggo ndeleng papat tooltip arah: ndhuwur, tengen, ngisor, lan kiwa. Arah dicerminake nalika nggunakake Bootstrap ing 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>

Lan karo HTML khusus ditambahake:

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

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

Panggunaan

Plugin tooltip ngasilake konten lan markup sing dikarepake, lan kanthi gawan nyelehake tooltip sawise unsur pemicu.

Micu tooltip liwat 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 sing dibutuhake kanggo tooltip mung dataatribut lan titleing unsur HTML sampeyan pengin duwe tooltip. Markup sing digawe saka tooltip cukup prasaja, sanajan mbutuhake posisi (kanthi standar, disetel topdening 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 dipatèni

Elemen karo disabledatribut ora interaktif, tegese pangguna ora bisa fokus, hover, utawa ngeklik kanggo micu tooltip (utawa popover). Minangka solusi, sampeyan pengin micu tooltip saka pambungkus <div>utawa <span>, saenipun digawe keyboard-focusable nggunakake 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 bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-bs-, kaya ing data-bs-animation="". Priksa manawa kanggo ngganti jinis cilik saka jeneng pilihan saka camelCase kanggo kebab-kasus nalika liwat opsi liwat atribut data. Contone, tinimbang nggunakake data-bs-customClass="beautifier", gunakake data-bs-custom-class="beautifier".

Nggunakake fungsi karopopperConfig

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

Metode

nuduhake

Nuduhake tooltip unsur. Bali menyang panelpon sadurunge tooltip wis bener ditampilake (yaiku sadurunge shown.bs.tooltipacara kedaden). Iki dianggep minangka "manual" pemicu tooltip. Tooltips karo judhul nol-dawa ora tau ditampilake.

tooltip.show()

ndhelikake

Ndhelikake tooltip unsur. Bali menyang panelpon sadurunge tooltip bener-bener didhelikake (yaiku sadurunge hidden.bs.tooltipkedadeyan kasebut). Iki dianggep minangka "manual" pemicu tooltip.

tooltip.hide()

ngalih

Ngalih tooltip unsur. Bali menyang panelpon sadurunge tooltip wis bener ditampilake utawa didhelikake (yaiku sadurunge acara shown.bs.tooltiputawa hidden.bs.tooltipkedadeyan). Iki dianggep minangka "manual" pemicu tooltip.

tooltip.toggle()

mbuwang

Ndhelikake lan ngrusak tooltip unsur (Mbusak data sing disimpen ing unsur DOM). Tooltips sing nggunakake delegasi (sing digawe nggunakake pilihanselector ) ora bisa dirusak individu ing unsur pemicu turunan.

tooltip.dispose()

ngaktifake

Menehi tooltip unsur kemampuan kanggo ditampilake. Tooltips diaktifake kanthi gawan.

tooltip.enable()

mateni

Mbusak kemampuan kanggo nuduhake tooltip unsur. Tooltip mung bakal bisa ditampilake yen wis diaktifake maneh.

tooltip.disable()

toggleAktifake

Ngalih kemampuan kanggo tooltip unsur supaya ditampilake utawa didhelikake.

tooltip.toggleEnabled()

nganyari

Nganyari posisi tooltip unsur.

tooltip.update()

getInstance

Cara statis sing ngidini sampeyan entuk conto tooltip sing ana gandhengane karo unsur DOM

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

getOrCreateInstance

Cara statis sing ngidini sampeyan entuk conto tooltip sing ana gandhengane karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti.

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