Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

Batoli ya bisaleli

Mikanda mpe bandakisa mpo na kobakisa bisaleli ya Bootstrap ya moto ye moko na CSS mpe JavaScript na kosalelaka CSS3 mpo na ba animations mpe ba data-bs-attributs mpo na kobomba titre ya esika.

Na lokasa oyo

Botali ya mozindo

Makambo oyo osengeli koyeba ntango ozali kosalela plugin ya tooltip:

  • Tooltips etie motema na bibliothèque ya troisième partie Popper pona positionnement. Esengeli otia popper.min.js liboso bootstrap.jsya , to osalela moko bootstrap.bundle.min.jsoyo ezali na Popper.
  • Tooltips ezali opt-in mpo na ba raisons ya performance, yango wana esengeli o initialiser yango yo moko .
  • Ba toli ya bisaleli oyo ezali na mitó ya makambo ya bolai zéro emonisami ata mokolo moko te.
  • Boyebisa container: 'body'pona ko éviter ba problèmes ya rendu na ba composants plus complexes (lokola ba groupes na biso ya entrée, ba groupes ya boutons, etc).
  • Ko déclencher ba toli ya bisaleli na ba éléments oyo ebombami ekosala te.
  • Ba toli ya bisaleli mpo na .disabledto disabledba éléments esengeli e déclenché na élément ya enveloppe.
  • Ntango ebandisami uta na ba hyperliens oyo epanzani na milɔngɔ mingi, ba toli ya bisaleli ekozala na katikati. Salelá white-space: nowrap;na s na yo <a>mpo na koboya ezaleli oyo.
  • Esengeli kobomba ba toli ya bisaleli yambo ya kolongola ba éléments na yango oyo ekokani na yango na DOM.
  • Ba conseils d'outils ekoki ko déclenché grâce na élément moko na kati ya DOM ya ombre.

Ozwi nyonso wana? Monene, totala ndenge basalaka na mwa bandakisa.

Par défaut, composant oyo esalela sanitizer ya contenus intégré, oyo elongolaka ba éléments HTML nionso oyo epesami nzela ya polele te. Tala eteni ya sanitizer na mikanda na biso ya JavaScript mpo na koyeba makambo mosusu.
Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motionrequête ya média. Tala eteni ya mouvement réduit ya mikanda na biso ya accessibilité .

Bandakisa

Activer ba toli ya bisaleli

Ndenge tolobaki yango likolo, esengeli obandisa ba toli ya bisaleli liboso ya kosalela yango. Lolenge moko ya ko initialiser ba toli nionso ya bisaleli na lokasa moko ekozala ya kopona yango na data-bs-toggleattribut na yango, lokola boye:

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

Botia maboko na ba liens oyo ezali awa na se mpo na komona ba toli ya bisaleli:

Mokanda ya esika mpo na kolakisa mwa ba liens ya kati na ba toli ya bisaleli. Oyo eza sikoyo kaka filler, killer te. Contenu oyo batie awa kaka pona ko imiter présence ya texte ya solo . Mpe nyonso wana kaka mpo na kopesa yo likanisi ya ndenge oyo batoli ya bisaleli ekozala ntango basaleli yango na makambo ya solosolo. Donc espérons que omoni sikoyo ndenge nini ba conseils d’outils oyo na ba liens ekoki kosala na pratique, mbala moko osaleli yango na site to projet na yo moko .

html 
<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>
Bozala na bonsomi ya kosalela moko titleto data-bs-titlena HTML na bino. Tango titleesalelami, Popper eko remplacer yango automatiquement na data-bs-titletango élément ezo rendu.

Ba toli ya bisaleli oyo esalemi na kolanda bamposa ya moto

Ebakisami na v5.2.0

Okoki ko personnaliser ndenge ya komonana ya ba toli ya bisaleli na kosalelaka ba variables ya CSS . Totie classe personnalisée na data-bs-custom-class="custom-tooltip"pona ko scoper apparence personnalisée na biso pe tosalelaka yango pona ko overrider variable CSS locale.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}
html 
<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>

Ndenge ya kosala

Tyá lobɔkɔ likoló ya ba boutons oyo ezali awa na nse mpo na komona malako minei ya malako ya bisaleli: likoló, na lobɔkɔ ya mobali, na nse mpe na lobɔkɔ ya mwasi. Ba direction ezali mirroré tango ozali kosalela Bootstrap na 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>

Mpe na HTML ya momeseno oyo ebakisami:

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

Na SVG moko:

CSS

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba toli ya bisaleli esalela sikoyo ba variables ya CSS ya esika on .tooltipmpo na personnalisation ya temps réel oyo ematisami. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

  --#{$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};

Ba variables ya Sass

$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

Kosalela yango

Plugin ya tooltip ebimisaka contenus mpe marquage na demande, mpe par défaut etie ba tooltip sima ya élément ya déclencheur na bango.

Déclenchez tooltip na nzela ya JavaScript:

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

Position ya Tooltip emekaka kobongola automatiquement tango conteneur ya moboti ezali to overflow: autolokola overflow: scrollya biso .table-responsive, kasi ebatelaka kaka positionnement ya placement ya ebandeli. Mpo na kosilisa yango, tia boundaryoption (mpo na modificateur ya flip kosalela popperConfigoption) na HTMLElement nionso mpo na ko superposer valeur par défaut, 'clippingParents', lokola document.body:

const tooltip = new bootstrap.Tooltip('#example', {
  boundary: document.body // or document.querySelector('#boundary')
})

Kosala bilembo

Marquage oyo esengeli mpo na tooltip ezali kaka dataattribut mpe titlena élément HTML olingi kozala na tooltip. Marquage oyo esalemi ya tooltip ezali plutôt simple, atako esengaka position (par défaut, etiamaki na topna plugin).

Kosala ete ba toli ya bisaleli esalaka mpo na basaleli ya klaviatware mpe ya tekiniki ya kosunga

Esengeli kaka kobakisa ba toli ya bisaleli na ba éléments HTML oyo na bonkoko ekoki ko focuser na clavier mpe interactif (lokola ba liens to ba contrôles ya formulaire). Atako ba éléments HTML arbitraires (lokola <span>s) ekoki kosalama focusable na kobakisa tabindex="0"attribut, yango ekobakisa ba arrêts ya ba onglets potentiellement dérangeants mpe confus na ba éléments non interactifs mpo na ba usagers ya clavier, mpe ba technologies mingi ya assistance na tango oyo esakolaka tooltip te na situation oyo. En plus, ko se fier kaka te hovercomme déclencheur ya tooltip na yo, po yango ekosala que ba tolips na yo ezala impossible ya ko déclencher pona ba usagers ya clavier.

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

Ba éléments oyo ekangami

Ba éléments oyo ezali na disabledattribut ezali interactif te, elingi koloba ba usagers bakoki te ko focuser, ko hover, to ko cliquer yango pona ko déclencher tooltip (to popover). Lokola likambo ya kosilisa yango, okolinga ko déclencher tooltip uta na enveloppe <div>to <span>, malamu esalemi na clavier-focusable na kosalelaka tabindex="0".

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

Makambo oyo okoki kopona

Lokola ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript, okoki kobakisa kombo ya option na data-bs-, lokola na data-bs-animation="{value}". Sala makasi o changer type ya cas ya kombo ya option depuis “ camelCase ” na “ kebab-case ” tango ozali koleka ba options via ba attributs ya ba données. Na ndakisa, salelá data-bs-custom-class="beautifier"na esika ya data-bs-customClass="beautifier".

Kobanda na Bootstrap 5.2.0, ba composants nionso esungaka attribut ya ba données réservées expérimentalesdata-bs-config oyo ekoki ko louer configuration ya composant simple lokola chaîne JSON. Tango élément moko ezali data-bs-config='{"delay":0, "title":123}'na na ba data-bs-title="456"attributs, valeur ya suka titleekozala 456mpe ba attributs ya ba données separates eko overrider ba valeurs oyo epesami na data-bs-config. En plus, ba attributs ya ba données oyo ezali ezali capable ya ko louer ba valeurs JSON lokola data-bs-delay='{"show":0,"hide":150}'.

Yeba ete mpo na bantina ya bokengi sanitize, sanitizeFn, mpe allowListba options ekoki kopesama te na kosalelaka ba attributs ya ba données.
Nkombo Lolenge Mbeba Ndimbola
allowList moto ya likambo Valeur ya défaut Objet oyo ezali na ba attributs na ba balises oyo epesami nzela.
animation boolean true Salelá transition ya fade ya CSS na tooltip.
boundary molongo, eloko 'clippingParents' Frontière ya contrainte ya débordement ya tooltip (etali kaka na modificateur ya preventOverflow ya Popper). Na ndenge ya libela, ezali 'clippingParents'mpe ekoki kondima référence HTMLElement (na nzela ya JavaScript kaka). Mpo na koyeba makambo mingi tala Docs ya detectOverflow ya Popper .
container molongo, eleman, lokuta false Ebakisi toli ya bisaleli na eloko moko ya sikisiki. Ndakisa: container: 'body'. Option oyo ezali surtout utile na ndenge epesaka yo nzela ya ko positionner tooltip na flux ya mokanda pene ya élément déclencheur - oyo ekopekisa tooltip e flotter mosika na élément déclencheur na tango ya changement ya taille ya fenêtre.
customClass molongo, mosala '' Bakisa ba classes na tooltip tango elakisami. Yeba ete ba classes oyo ekobakisama en plus ya ba classes nionso oyo elakisami na modèle. Mpo na kobakisa bakelasi mingi, kabola yango na bisika: 'class-1 class-2'. Okoki mpe koleka fonction oyo esengeli kozongisa molongo moko oyo ezali na ba kombo ya kelasi ya kobakisa.
delay motango, eloko 0 Retard ya kolakisa mpe kobomba tooltip (ms) —etali te lolenge ya déclencheur manuel. Soki nimero moko epesami, retard esalemi na nyonso mibale kobomba/lakisa. Ebongiseli ya biloko ezali: delay: { "show": 500, "hide": 100 }.
fallbackPlacements array ya biloko ['top', 'right', 'bottom', 'left'] Limbola ba placements ya fallback na kopesaka liste ya ba placements na array (na ordre ya préférence). Mpo na koyeba makambo mingi tala mikanda ya bizaleli ya Popper .
html boolean false Tika HTML na kati ya tooltip. Soki ezali solo, ba balises HTML na tooltip's titleekozala rendu na tooltip. Soki lokuta, innerTextpropriété ekosalelama mpo na kokotisa makambo na DOM. Salelá makomi soki ozali komitungisa mpo na ba attaques ya XSS.
offset array, molongo, mosala [0, 0] Offset ya tooltip par rapport na cible na yango. Okoki koleka molongo na ba attributs ya ba données na ba valeurs oyo ekabwani na virgule lokola: data-bs-offset="10,20". Tango fonction esalelami pona koyeba offset, ebengamaka na objet oyo ezali na placement ya popper, référence, na ba rects ya popper lokola argument na yango ya liboso. Node DOM ya élément déclencheur eleki lokola argument ya mibale. Fonction esengeli kozongisa array oyo ezali na ba nombres mibale: skidding , distance . Mpo na koyeba makambo mingi tala Docs ya offset ya Popper .
placement molongo, mosala 'top' Ndenge ya ko positionner tooltip: auto, likolo, na se, gauche, droite. Tango autoelakisami, eko réorienter dynamiquement tooltip. Tango fonction esalelami pona koyeba placement, ebengami na node DOM ya tooltip lokola argument na yango ya liboso mpe node DOM ya élément déclencheur lokola ya mibale na yango. Contexte thisetiamaki na instance ya tooltip.
popperConfig null, eloko, mosala null Mpo na kobongola configuration ya Popper ya liboso ya Bootstrap, tala configuration ya Popper . Tango fonction moko esalelami pona kosala configuration ya Popper, ebengami na objet oyo ezali na configuration ya Popper par défaut ya Bootstrap. Esalisaka yo osalela mpe osangisa oyo ya liboso na configuration na yo moko. Fonction esengeli kozongisa objet ya configuration pona Popper.
sanitize boolean true Activer to désactiver sanitisation. Soki activé 'template', 'content'na ba 'title'options ekozala sanitisé.
sanitizeFn null, mosala null Awa okoki ko fournir fonction ya sanitize na yo moko. Yango ekoki kozala na ntina soki olingi kosalela bibliotɛkɛ oyo ebongisami mpo na kosala bopɛto.
selector nsinga, lokuta false Soki moponi epesami, biloko ya tooltip ekopesama na ba cibles oyo elakisami. Na pratique, yango esalelamaka pona pe kosalela ba toli ya bisaleli na ba éléments DOM oyo ebakisami dynamiquement ( jQuery.onsoutien). Talá nimero oyo mpe ndakisa oyo ezali kopesa makambo mingi .
template shene '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' Base HTML ya kosalela tango ya kosala tooltip. Ba tooltip's titleekozala injecté na kati ya .tooltip-inner. .tooltip-arrowekokóma flèche ya tooltip. Elemento ya enveloppe ya libanda esengeli kozala na .tooltipclasse mpe role="tooltip".
title molongo, eleman, mosala '' Valeur ya titre par défaut soki titleattribut ezali te. Soki fonction moko epesami, ekobenga yango na thisensemble ya référence na yango na élément oyo popover ekangami na yango.
trigger shene 'hover focus' Ndenge nini tooltip e déclenché: cliquez, hover, focus, manuel. Okoki koleka ba déclencheur ebele; kokabola bango na esika moko. 'manual'elakisi ete tooltip ekozala déclenché programmatiquement na nzela ya .tooltip('show'), .tooltip('hide')mpe .tooltip('toggle')ba méthodes; motuya oyo ekoki kosangisama te na déclencheur mosusu. 'hover'na yango moko ekopesa ba toli ya bisaleli oyo ekoki ko déclencher te na nzela ya clavier, mpe esengeli kosalelama kaka soki ba méthodes mosusu ya kopesa ba informations moko mpo na ba usagers ya clavier ezali.

Ba attributs ya ba données pona ba toli ya bisaleli moko moko

Ba options pona ba toli ya bisaleli moko moko ekoki na ndenge mosusu kozala précisé na nzela ya bosaleli ya ba attributs ya ba données, ndenge elimbolami likolo.

Kosalela fonction napopperConfig 

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

Ba méthodes ya kosala

Ba méthodes asynchrones na ba transitions

Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .

Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .

Metode Ndimbola
disable Elongolaka makoki mpo na tooltip ya eleman moko elakisama. Likanisi ya bisaleli ekozala na makoki ya kolakisa kaka soki efungolami lisusu.
dispose Ebombaka mpe ebebisaka tooltip ya élément moko (Elongolaka ba données oyo ebombami na élément DOM). Ba toli ya bisaleli oyo esalela délégation (oyo esalemi na kosalelaka option selector) ekoki kobebisama moko moko te na ba éléments déclencheur descendant.
enable Epesi tooltip ya élément moko makoki ya kolakisa. Ba toli ya bisaleli efungolami na ndenge ya libela.
getInstance Méthode statique oyo e permettre yo ozua instance ya tooltip associé na élément DOM, to kosala ya sika au cas où ezalaki initialisé te.
getOrCreateInstance Méthode statique oyo e permettre yo ozua instance ya tooltip associé na élément DOM, to kosala ya sika au cas où ezalaki initialisé te.
hide Ebombaka tooltip ya élément moko. Ezongi na mobengi yambo ete tooltip ebombama mpenza (elingi koloba liboso ete hidden.bs.tooltiplikambo esalema). Yango etalelami lokola déclenchement “manuel” ya tooltip.
setContent Epesi lolenge ya kobongola makambo ya tooltip nsima ya bobandi na yango.
show Ezali kobimisa tooltip ya élément moko. Ezongi na mobengi yambo ete tooltip elakisama mpenza (elingi koloba liboso ete shown.bs.tooltiplikambo esalema). Yango etalelami lokola déclenchement “manuel” ya tooltip. Ba toli ya bisaleli oyo ezali na mitó ya makambo ya bolai zéro emonisami ata mokolo moko te.
toggle Ezali kobongola toggle ya tooltip ya élément moko. Ezongi na mobengi yambo ete toli ya bisaleli elakisama to ebombama mpenza (elingi koloba liboso ete likambo shown.bs.tooltipto hidden.bs.tooltipesalema). Yango etalelami lokola déclenchement “manuel” ya tooltip.
toggleEnabled Ezali kobongola makoki mpo ete tooltip ya eleman moko elakisama to ebombama.
update Ezali kosala mikolo oyo position ya tooltip ya élément moko. 
const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })
Méthode setContentendimi objectargument, esika property-key moko na moko ezali stringselecteur ya malamu na kati ya modèle ya popover, mpe property-value moko na moko oyo etali yango ekoki kozala string| element| function| null

Makambo oyo esalemaki

Likambo Ndimbola
hide.bs.tooltip Evenement oyo ezo beta mbala moko tango hideméthode ya instance ebengami.
hidden.bs.tooltip Evenement oyo ezo beta tango popover esili kobombama na mosaleli (ekozela ba transitions ya CSS esila).
inserted.bs.tooltip Evenement oyo ezo beta sima ya show.bs.tooltipévénement tango modèle ya tooltip ebakisami na DOM.
show.bs.tooltip Evenement oyo ezo beta mbala moko tango showméthode ya instance ebengami.
shown.bs.tooltip Evenement oyo ezo beta tango popover esalemi visible na mosaleli (ekozela ba transitions ya CSS esila). 
const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()