Tooltips

Oersicht

Dingen om te witten by it brûken fan de tooltip-plugin:

• Tooltips fertrouwe op de 3rd party bibleteek Popper foar posisjonearring. Jo moatte popper.min.js opnimme foardat bootstrap.js of brûke bootstrap.bundle.min.js/ bootstrap.bundle.jsdy't Popper befettet om tooltips te wurkjen!
• Tooltips binne opt-in foar prestaasjesredenen, dus jo moatte se sels inisjalisearje .
• Tooltips mei titels fan nul lingte wurde nea werjûn.
• Spesifisearje container: 'body'om it werjaan fan problemen yn kompleksere komponinten te foarkommen (lykas ús ynfiergroepen, knopgroepen, ensfh.).
• It triggerjen fan tooltips op ferburgen eleminten sil net wurkje.
• Tooltips foar .disabledof disabledeleminten moatte wurde aktivearre op in wrapper elemint.
• Wannear't aktivearre wurdt fan hyperlinks dy't meardere rigels oerspant, sille tooltips sintraal wurde. Brûk white-space: nowrap;op jo <a>s om dit gedrach te foarkommen.
• Tooltips moatte ferburgen wurde foardat de oerienkommende eleminten fan 'e DOM fuortsmiten binne.
• Tooltips kinne wurde aktivearre troch in elemint binnen in skaad DOM.

Hast dat alles? Geweldich, lit ús sjen hoe't se wurkje mei guon foarbylden.

Foarbyld: Aktivearje tooltips oeral

Ien manier om alle tooltips op in side te inisjalisearjen soe wêze om se te selektearjen troch har data-bs-toggleattribút:

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

Foarbylden

Hover oer de keppelings hjirûnder om tooltips te sjen:

Hoverje oer de knoppen hjirûnder om de fjouwer tooltips-rjochtings te sjen: boppe, rjochts, ûnder en lofts. Rjochtingen wurde spegele by it brûken fan Bootstrap yn 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>

En mei oanpaste HTML tafoege:

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

Mei in SVG:

Sass

Fariabelen

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

Gebrûk

De tooltip-plugin genereart ynhâld en markearring op fraach, en pleatst standert tooltips nei har trigger-elemint.

Trigger de tooltip fia 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

De fereaske markup foar in tooltip is allinich in dataattribút en titleop it HTML-elemint wolle jo in tooltip hawwe. De generearre markup fan in tooltip is frij ienfâldich, hoewol it in posysje fereasket (standert, ynsteld toptroch de 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>

Utskeakele eleminten

Eleminten mei it disabledattribút binne net ynteraktyf, wat betsjut dat brûkers net kinne fokusje, hoverje of klikke om in tooltip (of popover) te triggerjen. As oplossing wolle jo de tooltip fan in wrapper <div>of <span>, ideaal makke toetseboerd-fokusber makke mei 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>

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-bs-, lykas yn data-bs-animation="". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan camelCase nei kebab-case as jo de opsjes trochjaan fia gegevensattributen. Bygelyks, ynstee fan te brûken data-bs-customClass="beautifier", brûk dan data-bs-custom-class="beautifier".

Mei help fan funksje meipopperConfig

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

Metoaden

sjen litte

Bliuwt de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip wirklik werjûn is (dus foardat it shown.bs.tooltipbarren bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip. Tooltips mei titels fan nul lingte wurde nea werjûn.

tooltip.show()

ferstopje

Ferberget de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip eins ferburgen is (dus foardat it hidden.bs.tooltipbarren bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip.

tooltip.hide()

wikselje

Skeakelt de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip wirklik werjûn of ferburgen is (dus foardat it barren shown.bs.tooltipof hidden.bs.tooltipbart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip.

tooltip.toggle()

disponearje

Ferberget en ferneatiget de tooltip fan in elemint (Ferwidert bewarre gegevens op it DOM-elemint). Tooltips dy't delegaasje brûke (dy't makke binne mei de selectoropsje ) kinne net yndividueel ferneatige wurde op ôfstammende trigger-eleminten.

tooltip.dispose()

ynskeakelje

Jout de tooltip fan in elemint de mooglikheid om te sjen. Tooltips binne standert ynskeakele.

tooltip.enable()

útskeakelje

Ferwidert de mooglikheid om de tooltip fan in elemint te sjen. De tooltip sil allinich te sjen wêze kinne as it opnij ynskeakele is.

tooltip.disable()

toggleEnabled

Wizigje de mooglikheid om de tooltip fan in elemint te sjen of te ferbergjen.

tooltip.toggleEnabled()

update

Updatet de posysje fan de tooltip fan in elemint.

tooltip.update()

getInstance

Statyske metoade wêrmei jo de tooltip-eksimplaar kinne krije ferbûn mei in DOM-elemint

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

getOrCreateInstance

Statyske metoade wêrmei jo de tooltip-eksimplaar kinne krije dy't assosjeare is mei in DOM-elemint, of in nij oanmeitsje foar it gefal dat it net inisjalisearre is

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

Eveneminten

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

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

tooltip.hide()