Source

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-attributs mpo na bobateli ya titre ya esika.

Botali ya mozindo

Makambo oyo osengeli koyeba ntango ozali kosalela plugin ya tooltip:

  • Tooltips etie motema na bibliothèque ya 3ème partie Popper.js pona positionnement. Esengeli otia popper.min.js liboso ya bootstrap.js to osalela bootstrap.bundle.min.js/ bootstrap.bundle.jsoyo ezali na Popper.js mpo ete ba toli ya bisaleli esalaka!
  • Soki ozali kotonga JavaScript na biso uta na source, esengiutil.js .
  • 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.

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

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

Ndakisa: Salá ete batoli ya bisaleli ezala bisika nyonso

Lolenge moko ya ko initialiser ba toli nionso ya bisaleli na lokasa moko ekozala ya kopona yango na data-toggleattribut na yango:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Bandakisa

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

Pantalon serré niveau prochain keffiyeh probablement oyoki bango te. Photo cabine mandefu brut denim tipskrit sac messenger vegan stumptown. Ferme-à-mesa seitan, mcsweeney ya fixie durable quinoa 8-bit bilamba ya américain bazali na terry richardson vinyl chambray. Mandefu stumptown, cardigans banh mi lomo ba mbwa ya nkake. Tofu biodiesel williamsburg marfa, minei loko mcsweeney ya kosukola chambray vegan. Un vraiment artisan ironique quelque soit keytar , scenester ferme-à-mesa banksy Austin twitter manche freegan cred cru denim café d'origine unique viral.

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.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Mpe na HTML ya momeseno oyo ebakisami:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

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:

$('#example').tooltip(options)
Débordement autompescroll

Position ya Tooltip emekaka kobongola automatiquement tango conteneur ya moboti ezali overflow: autoto overflow: scrolllokola ya biso .table-responsive, kasi ebatelaka kaka positionnement ya placement ya ebandeli. Mpo na kosilisa, tyá boundaryoption na eloko mosusu longola kaka motuya ya liboso, 'scrollParent', lokola 'window':

$('#example').tooltip({ boundary: 'window' })

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 onglet potentiellement dérangeant mpe confusion na ba éléments non interactifs mpo na ba usagers ya clavier. En plus, ba technologies ya assistance mingi 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-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="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 clavier-focusable kosalela tabindex="0", mpe koboya na pointer-eventson the disabled element.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-animation="".

Nkombo Lolenge Mbeba Ndimbola
animation ya kosala boolean ya solo Salelá transition ya fade ya CSS na tooltip
eloko oyo batyaka na kati molongo ya molongo | élément | lokuta lokuta

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.
kozelisa motango | moto ya likambo 0.

Retard ya kolakisa pe kobomba tooltip (ms) - etali te lolenge ya déclencheur manuel

Soki nimero moko epesami, retard esalemi na nyonso mibale kobomba/lakisa

Bokeli ya eloko ezali:delay: { "show": 500, "hide": 100 }
html boolean lokuta

Tika HTML na kati ya tooltip.

Soki ezali solo, ba balises HTML na tooltip's titleekozala rendu na tooltip. Soki lokuta, méthode ya jQuery textekosalelama mpo na kokotisa makambo na DOM.

Salelá makomi soki ozali komitungisa mpo na ba attaques ya XSS.
esika ya kotya yango molongo ya molongo | mosala 'likolo'

Ndenge nini ko positionner tooltip - auto | likolo ya likolo | na nse | na gauche | malamu.
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.
moponi molongo ya molongo | lokuta lokuta 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á oyo mpe ndakisa moko oyo ezali kopesa makambo mingi .
modèle ya kosala shene '<div class="tooltip" role="tooltip"><div class="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.

.arrowekokóma flèche ya tooltip.

Elemento ya enveloppe ya libanda esengeli kozala na .tooltipclasse mpe role="tooltip".
titre molongo ya molongo | élément | mosala '' .

Valeur ya titre par défaut soki titleattribut ezali te.

Soki fonction epesami, ekobenga yango na thisensemble ya référence na yango na élément oyo tooltip ekangami na yango.
kobandisa shene 'hover focus'.

Ndenge nini tooltip ebandi - finá | kosala hover | focus | mokanda. 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.
offset ya kosala motango | shene 0. Offset ya tooltip par rapport na cible na yango. Mpo na koyeba makambo mingi tala Docs ya offset ya Popper.js .
fallbackKotia na esika ya mosala molongo ya molongo | array 'kobalusa' Tika kolakisa position nini Popper akosalela na fallback. Mpo na koyeba makambo mingi tala Docs ya bizaleli ya Popper.js
ndelo ya mboka molongo ya molongo | eloko 'moboti ya défilement'. Frontière ya contrainte ya débordement ya tooltip. Endimi motuya ya 'viewport', 'window', 'scrollParent', to référence ya HTMLElement (JavaScript kaka). Mpo na koyeba makambo mingi tala ba docs ya preventOverflow ya Popper.js .

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.

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 .

$().tooltip(options)

Ezali kokangisa mosaleli ya tooltip na liboke ya biloko.

.tooltip('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.

$('#element').tooltip('show')

.tooltip('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.

$('#element').tooltip('hide')

.tooltip('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.

$('#element').tooltip('toggle')

.tooltip('dispose')

Ebombaka mpe ebebisaka tooltip ya élément moko. 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.

$('#element').tooltip('dispose')

.tooltip('enable')

Epesi tooltip ya élément moko makoki ya kolakisa. Ba toli ya bisaleli efungolami na ndenge ya libela.

$('#element').tooltip('enable')

.tooltip('disable')

Elongolaka makoki mpo na tooltip ya eleman moko elakisama. Likanisi ya bisaleli ekozala na makoki ya kolakisa kaka soki efungolami lisusu.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Ezali kobongola makoki mpo ete tooltip ya eleman moko elakisama to ebombama.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Ezali kosala mikolo oyo position ya tooltip ya élément moko.

$('#element').tooltip('update')

Makambo oyo esalemaki

Lolenge ya likambo Ndimbola
kolakisa.bs.toli ya bisaleli Evenement oyo ezo beta mbala moko tango showméthode ya instance ebengami.
oyo elakisami.bs.tooltip Evenement oyo ezo beta tango tooltip esalemi komonana na mosaleli (ekozela ba transitions ya CSS esila).
bomba.bs.likambo ya bisaleli Evenement oyo ezo beta mbala moko tango hideméthode ya instance ebengami.
ebombami.bs.tooltip ya bisaleli Evenement oyo ezo beta tango tooltip esili kobombama na mosaleli (ekozela ba transitions ya CSS esila).
ekotisami.bs.tooltip ya bisaleli Evenement oyo ezo beta sima ya show.bs.tooltipévénement tango modèle ya tooltip ebakisami na DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})