Tooltips

Ringkesan

Sing kudu dingerteni nalika nggunakake plugin tooltip:

• Tooltips gumantung ing Popper perpustakaan pihak katelu kanggo posisi. Sampeyan kudu kalebu popper.min.js sadurunge bootstrap.js, utawa nggunakake salah siji bootstrap.bundle.min.jssing ngemot Popper.
• 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.

Tuladha

Aktifake tooltips

Kaya kasebut ing ndhuwur, sampeyan kudu miwiti tooltips sadurunge bisa digunakake. Salah siji cara kanggo miwiti kabeh tooltip ing kaca yaiku milih kanthi data-bs-toggleatribut, kayata:

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

Tooltips ing pranala

Tutul ing pranala ing ngisor iki kanggo ndeleng 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 khusus

Sampeyan bisa ngatur tampilan tooltips nggunakake variabel CSS . Kita nyetel kelas khusus data-bs-custom-class="custom-tooltip"kanggo nyakup tampilan khusus lan digunakake kanggo ngatasi 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>

arah

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

Lan karo HTML khusus ditambahake:

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

Kanthi SVG:

CSS

Variabel

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, tooltips saiki nggunakake variabel CSS lokal .tooltipkanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

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

Panggunaan

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

Micu tooltip liwat 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 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" 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 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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Pilihan

Minangka opsi bisa liwati liwat atribut data utawa JavaScript, sampeyan bisa nambah jeneng pilihan kanggo data-bs-, kaya ing data-bs-animation="{value}". Priksa manawa kanggo ngganti jinis kasus jeneng pilihan saka " camelCase " kanggo " kebab-case " nalika ngliwati pilihan liwat atribut data. Contone, nggunakake data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Ing Bootstrap 5.2.0, kabeh komponen ndhukung atribut data sing dilindhungi eksperimendata-bs-config sing bisa ngemot konfigurasi komponen sing prasaja minangka string JSON. Nalika unsur duwe data-bs-config='{"delay":0, "title":123}'lan data-bs-title="456"atribut, titlenilai pungkasan bakal 456lan atribut data sing kapisah bakal ngilangi nilai sing diwenehake ing data-bs-config. Kajaba iku, atribut data sing ana bisa ngemot nilai JSON kaya data-bs-delay='{"show":0,"hide":150}'.

Nggunakake fungsi karopopperConfig

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