Konsiletoj

Superrigardo

Aferoj sciindaj kiam uzado de la konsileto-kromaĵo:

• Konsiletoj dependas de la tria-partia biblioteko Popper por poziciigado. Vi devas inkluzivi popper.min.js antaŭ bootstrap.js aŭ uzi bootstrap.bundle.min.js/ bootstrap.bundle.jskiu enhavas Popper por ke konsiletoj funkciu!
• Konsiletoj estas elekteblaj pro agado-kialoj, do vi devas pravigi ilin mem .
• Konsiletoj kun nullongaj titoloj neniam estas montrataj.
• Specifu container: 'body'por eviti bildigajn problemojn en pli kompleksaj komponantoj (kiel niaj eniggrupoj, butongrupoj, ktp).
• Deĉenigi konsiletojn pri kaŝitaj elementoj ne funkcios.
• Konsiletoj por .disabledaŭ disabledelementoj devas esti ekigitaj sur envolvaĵelemento.
• Kiam ĝi estas ekigita de hiperligoj kiuj ampleksas plurajn liniojn, konsiletoj estos centritaj. Uzu white-space: nowrap;sur via <a>por eviti ĉi tiun konduton.
• Konsiletoj devas esti kaŝitaj antaŭ ol iliaj respondaj elementoj estis forigitaj de la DOM.
• Konsiletoj povas esti ekigitaj danke al elemento ene de ombro DOM.

Ĉu vi havas ĉion tion? Bonege, ni vidu kiel ili funkcias kun kelkaj ekzemploj.

Ekzemplo: Ebligu konsiletojn ĉie

Unu maniero pravalorigi ĉiujn konsiletojn sur paĝo estus elekti ilin laŭ ilia data-bs-toggleatributo:

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

Ekzemploj

Ŝvebu super la subaj ligiloj por vidi konsiletojn:

Ŝvebu super la subaj butonoj por vidi la kvar konsiletojn: supre, dekstre, malsupre kaj maldekstre. Direktoj estas spegulitaj kiam vi uzas Bootstrap en 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>

Kaj kun kutima HTML aldonita:

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

Kun SVG:

Sass

Variabloj

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

Uzado

La kromkonsileto generas enhavon kaj markadon laŭpeto, kaj defaŭlte metas konsiletojn post ilia ellasilelemento.

Ekfunkciigu la konsileton per 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')
})

Markado

La bezonata markado por konsileto estas nur dataatributo kaj titlesur la HTML-elemento vi deziras havi konsileton. La generita markado de konsileto estas sufiĉe simpla, kvankam ĝi postulas pozicion (defaŭlte, agordita topde la kromaĵo).

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

Malebligitaj elementoj

Elementoj kun la disabledatributo ne estas interagaj, tio signifas, ke uzantoj ne povas fokusi, ŝvebi aŭ klaki ilin por ekigi konsileton (aŭ popover). Kiel solvo, vi volos ekigi la konsileton de envolvaĵo <div>aŭ <span>, ideale farita klavar-fokusebla per 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>

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-, kiel en data-bs-animation="". Nepre ŝanĝu la kazon de la opcionomo de camelCase al kebab-case kiam vi transdonas la opciojn per datumaj atributoj. Ekzemple, anstataŭ uzi data-bs-customClass="beautifier", uzu data-bs-custom-class="beautifier".

Uzante funkcion kunpopperConfig

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

Metodoj

montri

Rivelas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis montrita (te antaŭ ol la shown.bs.tooltipevento okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto. Konsiletoj kun nullongaj titoloj neniam estas montrataj.

tooltip.show()

kaŝi

Kaŝas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis kaŝita (te antaŭ ol la hidden.bs.tooltipevento okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto.

tooltip.hide()

baskuli

Ŝaltas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.tooltipevento hidden.bs.tooltipokazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto.

tooltip.toggle()

disponi

Kaŝas kaj detruas la konsileton de elemento (Forigas konservitajn datumojn sur la DOM-elemento). Konsiletoj kiuj uzas delegacion (kiuj estas kreitaj per la selectoropcio ) ne povas esti individue detruitaj sur posteulaj ellasilelementoj.

tooltip.dispose()

ebligi

Donas al la konsileto de elemento la kapablon esti montrita. Konsiletoj estas ebligitaj defaŭlte.

tooltip.enable()

malŝalti

Forigas la kapablon por montri la konsileton de elemento. La konsileto nur povos esti montrita se ĝi estas reebligita.

tooltip.disable()

baskuligi Ebligita

Ŝaltas la kapablon por ke la konsileto de elemento estu montrita aŭ kaŝita.

tooltip.toggleEnabled()

ĝisdatigo

Ĝisdatigas la pozicion de la konsileto de elemento.

tooltip.update()

getInstance

Senmova metodo, kiu ebligas al vi akiri la konsileton asociitan kun DOM-elemento

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

getOrCreateInstance

Senmova metodo, kiu ebligas al vi akiri la konsileton-instancon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita.

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

Eventoj

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

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

tooltip.hide()