Mea faigaluega

Vaaiga lautele

Mea e tatau ona iloa pe a faʻaaogaina le meafaigaluega faʻapipiʻi:

• Mea faigaluega fa'alagolago ile faletusi lona tolu Popper mo le fa'atulagaina. E tatau ona e aofia ai popper.min.js i luma o le bootstrap.js poʻo le faʻaoga bootstrap.bundle.min.js/ bootstrap.bundle.jso loʻo i ai Popper ina ia mafai ai ona faʻaoga meafaigaluega!
• O mea faigaluega e filifili i totonu mo mafuaʻaga o faʻatinoga, o lea e tatau ai ona e amataina oe lava ia .
• E le fa'aalia lava ni mea faigaluega e leai ni fa'ailoga umi.
• Fa'ama'oti container: 'body'e 'alofia ai le fa'atupuina o fa'afitauli i vaega e sili atu ona lavelave (pei o tatou vaega fa'aoga, vaega fa'amau, ma isi).
• E le aoga le fa'aosoina o mea faigaluega i elemene natia.
• O mea faigaluega mo .disabledpo'o disabledelemene e tatau ona fa'aoso i luga o se elemene afifi.
• A fa'aoso mai hyperlinks e tele laina, o le a fa'atotonugalemu mea faigaluega. Fa'aoga white-space: nowrap;i lou <a>s e aloese ai mai lenei amio.
• E tatau ona natia mea faigaluega a'o le'i aveesea a latou elemene tutusa mai le DOM.
• Tooltips e mafai ona faʻaosoina faʻafetai i se elemene i totonu o se ata lafoia DOM.

E maua uma na mea? Lelei, se'i o tatou va'ai pe fa'apefea ona latou galulue fa'atasi ma ni fa'ata'ita'iga.

Fa'ata'ita'iga: Fa'aaga mea faigaluega i so'o se mea

O se tasi o auala e amata ai meafaigaluega uma i luga o se itulau o le filifilia lea i latou data-bs-toggleuiga:

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

Faataitaiga

Fa'apa i luga o so'oga o lo'o i lalo e va'ai i mea faigaluega:

Fa'ae'e i luga o fa'amau i lalo e va'ai ai fa'atonuga meafaigaluega e fa: luga, taumatau, lalo, ma le agavale. E fa'aata fa'atonuga pe a fa'aaoga Bootstrap ile 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>

Ma faʻatasi ai ma le HTML masani faʻaopoopo:

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

Faatasi ai ma se SVG:

Sass

Fuafuaga

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

Fa'aoga

O le tooltip plugin e fa'atupuina ai mea ma fa'ailoga pe a mana'omia, ma e le mafai ona tu'u meafaigaluega pe a mae'a a latou elemene fa'aoso.

Fa'aoso le mea faigaluega e ala ile 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')
})

Fa'ailoga

Ole fa'ailoga mana'omia mo se mea faigaluega e na'o se datauiga ma titleluga ole elemene HTML e te mana'o e maua se meafaigaluega. O le faʻailoga faʻatupuina o se meafaigaluega e faigofie tele, e ui lava e manaʻomia se tulaga (e ala i le faaletonu, seti i tople 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>

Elemene le atoatoa

O elemene e iai le disableduiga e le fegalegaleai, o lona uiga e le mafai e tagata faʻaoga ona taulaʻi, faʻafefe, pe kiliki i latou e faʻaosoina ai se meafaigaluega (poʻo le popover). I le avea ai o se fofo, e te manaʻo e faʻaosoina le meafaigaluega mai se afifi <div>poʻo <span>, faʻaoga lelei le keyboard-faʻaoga e faʻaaoga ai le 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>

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-bs-, pei o le data-bs-animation="". Ia mautinoa e sui le ituaiga mataupu o le igoa filifiliga mai le camelCase i le kebab-case pe a pasia filifiliga e ala i faʻamatalaga uiga. Mo se faʻataʻitaʻiga, nai lo le faʻaaogaina data-bs-customClass="beautifier", faʻaaoga data-bs-custom-class="beautifier".

Fa'aaogaina galuega fa'atasi mapopperConfig

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

Metotia

fa'aali

Fa'aalia le mea faigaluega o se elemene. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni mai le mea faigaluega (fa'atusa a'o le'i tupu le shown.bs.tooltipmea na tupu). O lenei mea ua manatu o se "manual" faʻaosoina o le meafaigaluega. E le fa'aalia lava ni mea faigaluega e leai ni fa'ailoga umi.

tooltip.show()

lalafi

Natia le mea faigaluega o se elemene. Toe fo'i atu i le tagata vala'au a'o le'i natia le mea faigaluega (fa'atusa a'o le'i tupu le hidden.bs.tooltipmea na tupu). O lenei mea ua manatu o se "manual" faʻaosoina o le meafaigaluega.

tooltip.hide()

fesuia'i

Su'e le pito meafaigaluega a se elemene. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le mea faigaluega (fa'atusa a'o le'i tupu le shown.bs.tooltippo'o le hidden.bs.tooltipmea na tupu). O lenei mea ua manatu o se "manual" faʻaosoina o le meafaigaluega.

tooltip.toggle()

lafoa'i

Natia ma fa'aleagaina le mea faigaluega a le elemene (Ave'ese fa'amaumauga o lo'o teuina ile elemene DOM). Tooltips e fa'aogaina le tu'uina atu (lea e faia i le fa'aogaina o le selectorfilifiliga ) e le mafai ona fa'aumatia ta'ito'atasi i elemene fa'aoso tupuaga.

tooltip.dispose()

mafai

E tu'uina atu i se mea e fa'aoga meafaigaluega e mafai ona fa'aalia. E mafai ona fa'aogaina mea faigaluega.

tooltip.enable()

fa'aletonu

Aveese le agava'a mo se mea faigaluega e fa'aalia. Fa'atoa mafai ona fa'aalia le mea faigaluega pe a toe fa'aagaina.

tooltip.disable()

ToggleEnabled

Fa'afeso'ota'i le agava'a mo se mea faigaluega e fa'aalia pe natia.

tooltip.toggleEnabled()

fa'afouga

Fa'afou le tulaga o se mea faigaluega a le elemene.

tooltip.update()

getInstance

Metotia static lea e mafai ai e oe ona maua le faʻataʻitaʻiga meafaigaluega e fesoʻotaʻi ma se elemene DOM

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

getOrCreateInstance

Metotia static lea e mafai ai e oe ona maua le faʻataʻitaʻiga meafaigaluega e fesoʻotaʻi ma se elemene DOM, poʻo le fatuina o se mea fou i le tulaga e leʻi amataina.

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

Mea na tutupu

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

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

tooltip.hide()