Mga tooltip

Pangkalahatang-ideya

Mga bagay na dapat malaman kapag ginagamit ang tooltip plugin:

• Ang mga tooltip ay umaasa sa 3rd party na library na Popper para sa pagpoposisyon. Dapat mong isama ang popper.min.js bago ang bootstrap.js o gamitin ang bootstrap.bundle.min.js/ bootstrap.bundle.jsna naglalaman ng Popper upang gumana ang mga tooltip!
• Ang mga tooltip ay nag-opt-in para sa mga dahilan ng pagganap, kaya dapat mong simulan ang mga ito sa iyong sarili .
• Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.
• Tukuyin container: 'body'upang maiwasan ang pag-render ng mga problema sa mas kumplikadong mga bahagi (tulad ng aming mga pangkat ng input, mga pangkat ng button, atbp).
• Ang pag-trigger ng mga tooltip sa mga nakatagong elemento ay hindi gagana.
• Ang mga tooltip para sa .disabledo mga disabledelemento ay dapat na ma-trigger sa isang elemento ng wrapper.
• Kapag na-trigger mula sa mga hyperlink na sumasaklaw sa maraming linya, ang mga tooltip ay igigitna. Gamitin white-space: nowrap;sa iyong <a>s upang maiwasan ang pag-uugaling ito.
• Dapat itago ang mga tooltip bago maalis ang mga kaukulang elemento nito sa DOM.
• Maaaring ma-trigger ang mga tooltip salamat sa isang elemento sa loob ng shadow DOM.

Nakuha ang lahat ng iyon? Mahusay, tingnan natin kung paano gumagana ang mga ito sa ilang mga halimbawa.

Halimbawa: Paganahin ang mga tooltip sa lahat ng dako

Ang isang paraan upang simulan ang lahat ng mga tooltip sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-bs-togglekatangian:

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

Mga halimbawa

Mag-hover sa mga link sa ibaba upang makita ang mga tooltip:

Mag-hover sa mga button sa ibaba upang makita ang apat na mga direksyon ng tooltip: itaas, kanan, ibaba, at kaliwa. Ang mga direksyon ay sinasalamin kapag gumagamit ng Bootstrap sa 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>

At may idinagdag na custom na HTML:

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

Sa isang SVG:

Sass

Mga variable

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

Paggamit

Ang tooltip plugin ay bumubuo ng content at markup on demand, at bilang default ay naglalagay ng mga tooltip pagkatapos ng kanilang trigger element.

I-trigger ang tooltip sa pamamagitan ng 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

Ang kinakailangang markup para sa isang tooltip ay isang datakatangian lamang at titlesa HTML element na nais mong magkaroon ng isang tooltip. Ang nabuong markup ng isang tooltip ay medyo simple, bagama't nangangailangan ito ng isang posisyon (bilang default, nakatakda sa toppamamagitan ng 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>

Mga elementong may kapansanan

Ang mga elementong may disabledkatangian ay hindi interactive, ibig sabihin, ang mga user ay hindi maaaring tumuon, mag-hover, o mag-click sa mga ito upang mag-trigger ng tooltip (o popover). Bilang isang solusyon, gugustuhin mong i-trigger ang tooltip mula sa isang wrapper <div>o <span>, perpektong ginawang keyboard-focusable gamit ang 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>

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-animation="". Siguraduhing baguhin ang uri ng kaso ng pangalan ng opsyon mula sa camelCase patungo sa kebab-case kapag ipinapasa ang mga opsyon sa pamamagitan ng mga katangian ng data. Halimbawa, sa halip na gamitin ang data-bs-customClass="beautifier", gamitin ang data-bs-custom-class="beautifier".

Paggamit ng function na maypopperConfig

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

Paraan

palabas

Nagpapakita ng tooltip ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang tooltip (ibig sabihin, bago shown.bs.tooltipmangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip. Ang mga tooltip na may zero-length na mga pamagat ay hindi kailanman ipinapakita.

tooltip.show()

tago

Itinatago ang tooltip ng isang elemento. Bumabalik sa tumatawag bago pa talaga naitago ang tooltip (ibig sabihin, bago hidden.bs.tooltipmangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip.

tooltip.hide()

magpalipat-lipat

I-toggle ang tooltip ng isang elemento. Bumabalik sa tumatawag bago ang tooltip ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang shown.bs.tooltipo hidden.bs.tooltipkaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng tooltip.

tooltip.toggle()

itapon

Itinatago at sinisira ang tooltip ng isang elemento (Tinatanggal ang nakaimbak na data sa elemento ng DOM). Ang mga tooltip na gumagamit ng delegasyon (na ginawa gamit ang selectoropsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.

tooltip.dispose()

paganahin

Nagbibigay sa tooltip ng elemento ng kakayahang ipakita. Ang mga tooltip ay pinagana bilang default.

tooltip.enable()

huwag paganahin

Tinatanggal ang kakayahang ipakita ang tooltip ng isang elemento. Maipapakita lang ang tooltip kung ito ay muling pinagana.

tooltip.disable()

toggleEnabled

I-toggle ang kakayahang ipakita o itago ang tooltip ng isang elemento.

tooltip.toggleEnabled()

update

Ina-update ang posisyon ng tooltip ng isang elemento.

tooltip.update()

getInstance

Static na paraan na nagbibigay-daan sa iyong makuha ang tooltip instance na nauugnay sa isang elemento ng DOM

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

getOrCreateInstance

Static na paraan na nagbibigay-daan sa iyong makuha ang instance ng tooltip na nauugnay sa isang elemento ng DOM, o lumikha ng bago kung sakaling hindi ito nasimulan

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

Mga kaganapan

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

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

tooltip.hide()