Tooltips

Oersicht

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

• Tooltips fertrouwe op de tredde partij bibleteek Popper foar posisjonearring. Jo moatte popper.min.js foar opnimme bootstrap.js, of ien brûke bootstrap.bundle.min.jsdy't Popper befettet.
• 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.

Foarbylden

Aktivearje tooltips

Lykas hjirboppe neamd, moatte jo tooltips inisjalisearje foardat se kinne wurde brûkt. Ien manier om alle tooltips op in side te initialisearjen soe wêze om se te selektearjen troch har data-bs-toggleattribút, lykas sa:

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

Tooltips oer keppelings

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

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

Oanpaste tooltips

Jo kinne it uterlik fan tooltips oanpasse mei CSS-fariabelen . Wy sette in oanpaste klasse mei data-bs-custom-class="custom-tooltip"om ús oanpaste uterlik te berikken en brûke it om in lokale CSS-fariabele te oerskriuwen.

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

Rjochtings

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

En mei oanpast HTML tafoege:

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

Mei in SVG:

CSS

Fariabelen

As ûnderdiel fan Bootstrap's evoluearjende CSS-fariabelen oanpak, brûke tooltips no lokale CSS-fariabelen op .tooltipfoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

  --#{$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 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:                    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

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:

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

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

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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Opsjes

As opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript, kinne jo in opsjenamme tafoegje oan data-bs-, lykas yn data-bs-animation="{value}". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan " camelCase " nei " kebab-case " as jo de opsjes trochjaan fia gegevensattributen. Brûk bygelyks data-bs-custom-class="beautifier"ynstee fan data-bs-customClass="beautifier".

Fanôf Bootstrap 5.2.0 stypje alle komponinten in eksperiminteel reservearre data-attribút data-bs-configdat ienfâldige komponintkonfiguraasje as in JSON-string kin herbergje. As in elemint hat data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"attributen, de definitive titlewearde sil wêze 456en de aparte gegevens attributen sille oerskriuwe wearden jûn op data-bs-config. Derneist kinne besteande gegevensattributen JSON-wearden lykas data-bs-delay='{"show":0,"hide":150}'.

Mei help fan funksje meipopperConfig

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

Metoaden

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

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

Eveneminten

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

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

tooltip.hide()