Konsiletoj

Superrigardo

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

• Konsiletoj dependas de la triaparta biblioteko Popper por poziciigado. Vi devas inkluzivi popper.min.js antaŭ bootstrap.js, aŭ uzi unu bootstrap.bundle.min.jskiu enhavas Popper.
• 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.

Ekzemploj

Ebligu konsiletojn

Kiel menciite supre, vi devas praligi konsiletojn antaŭ ol ili povas esti uzataj. Unu maniero pravalorigi ĉiujn konsiletojn sur paĝo estus elekti ilin laŭ ilia data-bs-toggleatributo, tiel:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Konsiletoj pri ligiloj

Ŝvebu super la subaj ligiloj por vidi konsiletojn:

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Propraj konsiletoj

Vi povas agordi la aspekton de konsiletoj per CSS-variabloj . Ni starigas kutiman klason kun data-bs-custom-class="custom-tooltip"por ampleksi nian kutiman aspekton kaj uzi ĝin por anstataŭi lokan CSS-variablon.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Direktoj

Ŝ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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Kun SVG:

CSS

Variabloj

Kiel parto de la aliro al evoluantaj CSS-variabloj de Bootstrap, konsiletoj nun uzas lokajn CSS .tooltip-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

Uzado

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

Ekfunkciigu la konsileton per JavaScript:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Opcioj

Ĉar opcioj povas esti pasigitaj per datumaj atributoj aŭ JavaScript, vi povas almeti opcionomon al data-bs-, kiel en data-bs-animation="{value}". Nepre ŝanĝu la kazon de la opcionomo de " camelCase " al " kebab-case " kiam vi pasas la opciojn per datumaj atributoj. Ekzemple, uzu data-bs-custom-class="beautifier"anstataŭ data-bs-customClass="beautifier".

Ekde Bootstrap 5.2.0, ĉiuj komponantoj subtenas eksperimentan rezervitan datuman atributon data-bs-config, kiu povas enhavi simplan komponan agordon kiel JSON-ĉeno. Kiam elemento havas data-bs-config='{"delay":0, "title":123}'kaj data-bs-title="456"atributojn, la fina titlevaloro estos 456kaj la apartaj datumaj atributoj anstataŭigos valorojn donitajn sur data-bs-config. Krome, ekzistantaj datumaj atributoj povas enhavi JSON-valorojn kiel data-bs-delay='{"show":0,"hide":150}'.

Uzante funkcion kunpopperConfig

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

Metodoj

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Eventoj

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()