Erreminta-aholkuak

Ikuspegi orokorra

Tooltip plugina erabiltzean jakin beharrekoak:

• Tresna-informazioak Popper hirugarren liburutegian oinarritzen dira kokatzeko. Popper.min.js sartu behar duzu bootstrap.js baino lehen edo Popper duen bootstrap.bundle.min.js/ erabili bootstrap.bundle.jsbehar duzu tresna-aholkuak funtziona dezan!
• Tresn-informazioak errendimendu arrazoiengatik aukeratzen dira, beraz, zuk zeuk hasieratu behar dituzu .
• Luzera zeroko tituluak dituzten tresna-aholkuak ez dira inoiz bistaratzen.
• Zehaztu container: 'body'osagai konplexuagoetan (adibidez, gure sarrera-taldeak, botoi-taldeak, etab.) arazoak errendatzea saihesteko.
• Ezkutuko elementuei buruzko argibideak abiarazteak ez du funtzionatuko.
• Elementuentzako tresna-informazioak bilgarri .disabled- disabledelementu batean abiarazi behar dira.
• Lerro bat baino gehiago hartzen dituzten hiperesteketatik abiarazten denean, tresna-aholkuak zentratuta egongo dira. Erabili white-space: nowrap;zure aldean <a>portaera hori saihesteko.
• Tresn-informazioak ezkutatu egin behar dira dagozkien elementuak DOMetik kendu aurretik.
• Tresn-informazioak itzaleko DOM baten barruan dagoen elementu bati esker abiarazi daitezke.

Hori guztia lortu duzu? Bikaina, ikus dezagun nola funtzionatzen duten adibide batzuekin.

Adibidea: gaitu tresna-informazioak nonahi

Orrialde bateko tresna-aholku guztiak hasieratzeko modu bat haien data-bs-toggleatributuaren arabera hautatzea izango litzateke:

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

Adibideak

Pasatu ondoko esteken gainean tresna-aholkuak ikusteko:

Pasatu sakatu beheko botoien gainean lau tresna-aholkuak ikusteko: goiko, eskuineko, beheko eta ezkerreko. Jarraibideak islatzen dira Bootstrap RTL-n erabiltzean.

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

Eta HTML pertsonalizatua gehituta:

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

SVG batekin:

Sass

Aldagaiak

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

Erabilera

Tooltip pluginak edukia eta markak sortzen ditu eskaeraren arabera, eta, modu lehenetsian, tresna-aholkuak jartzen ditu abiarazte-elementuaren ondoren.

Aktibatu tresna-informazioa JavaScript bidez:

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')
})

Markatzea

Tresna-informazio baterako beharrezkoa den marka dataatributu bat baino ez da eta titletresna-aholkua izan nahi duzun HTML elementuan. Tresna-informazio baten markaketa sinple samarra da, nahiz eta posizio bat behar duen (lehenespenez, toppluginak ezarrita).

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

Desgaitutako elementuak

Atributua duten elementuak disabledez dira interaktiboak, hau da, erabiltzaileek ezin dituzte bideratu, pasa edo klik egin tresna-informazio bat (edo popover) abiarazteko. Konponbide gisa, tresna-informazioa abiarazi nahi duzu bilgarri batetik <div>edo <span>, hobeki teklatua bideratzeko modukoa erabiliz 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>

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-bs-, hemen bezala data-bs-animation="". Ziurtatu aukera-izena kamelCase-tik kebab-case-ra aldatzen duzula aukerak datu-atributuen bidez aukerak pasatzean. Adibidez, erabili beharrean data-bs-customClass="beautifier", erabili data-bs-custom-class="beautifier".

Funtzioa erabilizpopperConfig

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

Metodoak

erakutsi

Elementu baten argibidea erakusten du. Deitzaileari itzultzen zaio tresna-informazioa benetan erakutsi aurretik (hau da, shown.bs.tooltipgertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da. Luzera zeroko tituluak dituzten tresna-aholkuak ez dira inoiz bistaratzen.

tooltip.show()

ezkutatu

Elementu baten argibidea ezkutatzen du. Deitzen duenari itzultzen zaio tresna-informazioa benetan ezkutatu baino lehen (hau da, hidden.bs.tooltipgertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da.

tooltip.hide()

txandakatu

Elementu baten tresna-informazioa aktibatzen du. Deitzaileari itzultzen zaio tresna-informazioa benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.tooltipedo hidden.bs.tooltipgertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da.

tooltip.toggle()

bota

Elementu baten informazioa ezkutatu eta suntsitzen du (DOM elementuan gordetako datuak kentzen ditu). Ordezkapena erabiltzen duten tresna- informazioak ( selectoraukera erabiliz sortzen direnak ) ezin dira banan-banan suntsitu ondorengo abiarazle-elementuetan.

tooltip.dispose()

gaitu

Elementu baten argibideari erakusteko gaitasuna ematen dio. Tresn-informazioak lehenespenez gaituta daude.

tooltip.enable()

desgaitu

Elementu baten tresna-informazioa erakusteko gaitasuna kentzen du. Tresna-informazioa berriro gaituta badago soilik erakutsi ahal izango da.

tooltip.disable()

toggleEnabled

Elementu baten tresna-informazioa erakusteko edo ezkutatzeko gaitasuna aldatzen du.

tooltip.toggleEnabled()

eguneratu

Elementu baten argibidearen posizioa eguneratzen du.

tooltip.update()

getInstance

Metodo estatikoa DOM elementu batekin erlazionatutako tresna-informazio instantzia lortzeko aukera ematen duena

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

getOrCreateInstance

Metodo estatikoa , DOM elementu batekin erlazionatutako tresna-informazio instantzia lortzeko edo berri bat sortzeko aukera ematen duena, hasieratu ez bazen.

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

Gertaerak

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

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

tooltip.hide()