in English

Konsèy zouti

Dokimantasyon ak egzanp pou ajoute konsèy Bootstrap koutim ak CSS ak JavaScript lè l sèvi avèk CSS3 pou animasyon ak done-atribi pou estokaj tit lokal yo.

Apèsi sou lekòl la

Bagay ou dwe konnen lè w ap itilize plugin tooltip la:

  • Ti konsèy yo konte sou Popper bibliyotèk twazyèm pati a pou pwezante. Ou dwe mete popper.min.js anvan bootstrap.js oswa itilize bootstrap.bundle.min.js/ bootstrap.bundle.jski gen Popper pou konsèy zouti yo travay!
  • Si w ap konstwi JavaScript nou an soti nan sous, li mande pouutil.js .
  • Ti konsèy yo patisipe pou rezon pèfòmans, kidonk ou dwe inisyalize yo tèt ou .
  • Konsèy zouti ak tit zewo-longè pa janm parèt.
  • Espesifye container: 'body'pou evite rann pwoblèm nan eleman ki pi konplèks (tankou gwoup opinyon nou yo, gwoup bouton, elatriye).
  • Deklanche konsèy sou eleman kache pa pral travay.
  • Konsèy zouti pou .disabledoswa disabledeleman yo dwe deklanche sou yon eleman wrapper.
  • Lè yo deklanche soti nan lyen ipèr ki kouvri plizyè liy, konsèy zouti yo pral santre. Sèvi ak white-space: nowrap;sou ou <a>pou evite konpòtman sa a.
  • Ti konsèy yo dwe kache anvan eleman korespondan yo te retire nan DOM la.
  • Konsèy zouti yo ka deklanche gras a yon eleman andedan yon DOM lonbraj.
Pa default, eleman sa a sèvi ak dezenfektan kontni entegre, ki retire nenpòt eleman HTML ki pa klèman pèmèt. Gade seksyon dezenfektan nan dokiman JavaScript nou an pou plis detay.
Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Gen tout sa? Gwo, ann wè ki jan yo travay ak kèk egzanp.

Egzanp: Pèmèt konsèy sou zouti toupatou

Youn nan fason yo inisyalize tout konsèy sou yon paj ta dwe chwazi yo pa data-toggleatribi yo:

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

Egzanp yo

Pase sou lyen ki anba yo pou wè konsèy sou zouti:

Tèks anplasman pou montre kèk lyen an liy ak konsèy sou zouti. Sa a se kounye a jis filler, pa gen okenn asasen. Kontni mete isit la jis imite prezans nan tèks reyèl . Ak tout sa jis pou ba ou yon lide sou ki jan konsèy zouti ta gade lè yo itilize nan sitiyasyon reyèl. Se konsa, èspere ke ou te kounye a wè ki jan konsèy sa yo sou lyen ka travay nan pratik, yon fwa ou itilize yo sou pwòp sit ou oswa pwojè.

Pase sou bouton ki anba yo pou wè kat direksyon konsèy yo: anwo, adwat, anba, ak agoch.

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

Epi ak HTML koutim te ajoute:

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

Itilizasyon

Plugin konsèy zouti a jenere kontni ak mak sou demann, epi pa default mete konsèy zouti apre eleman deklanche yo.

Deklanche konsèy zouti a atravè JavaScript:

$('#example').tooltip(options)
Debòde autoakscroll

Pozisyon Tooltip eseye chanje otomatikman lè yon veso paran gen overflow: autooswa overflow: scrollrenmen nou an .table-responsive, men li toujou kenbe pozisyon plasman orijinal la. Pou rezoud, mete boundaryopsyon nan nenpòt lòt bagay pase valè default 'scrollParent', tankou 'window':

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

Marke

Marke ki nesesè pou yon konsèy zouti se sèlman yon dataatribi epi titlesou eleman HTML ou vle gen yon konsèy. Markup pwodwi a nan yon konsèy zouti se pito senp, menm si li mande pou yon pozisyon (pa default, mete nan toppa Plugin la).

Fè konsèy sou zouti travay pou itilizatè klavye ak teknoloji asistans

Ou ta dwe sèlman ajoute konsèy sou eleman HTML ki tradisyonèlman konsantre sou klavye ak entèaktif (tankou lyen oswa kontwòl fòm). Malgre ke eleman HTML abitrè (tankou <span>s) yo ka fè konsantre lè yo ajoute tabindex="0"atribi a, sa pral ajoute tab stops potansyèlman anmèdan ak konfizyon sou eleman ki pa entèaktif pou itilizatè klavye, ak pifò teknoloji asistans kounye a pa anonse konsèy la nan sitiyasyon sa a. Anplis de sa, pa konte sèlman sou hoverkòm deklanche pou konsèy zouti ou a, paske sa ap fè konsèy ou yo enposib deklanche pou itilizatè klavye yo.

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

Eleman andikape

Eleman ki gen disabledatribi a pa entèaktif, sa vle di itilizatè yo pa ka konsantre, hover, oswa klike sou yo pou deklanche yon konsèy (oswa popover). Kòm yon solisyon, ou pral vle deklanche konsèy zouti ki soti nan yon anbalaj <div>oswa <span>, depreferans te fè klavye konsantre lè l sèvi avèk tabindex="0", epi pase pointer-eventssou plas eleman ki andikape a.

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-animation="".

Remake byen ke pou rezon sekirite sanitize, sanitizeFnak whiteListopsyon yo pa ka apwovizyone lè l sèvi avèk atribi done yo.
Non Kalite Default Deskripsyon
animasyon booleyen vre Aplike yon tranzisyon CSS fennen nan konsèy zouti a
veso fisèl | eleman | fo fo

Mete konsèy zouti a nan yon eleman espesifik. Egzanp: container: 'body'. Opsyon sa a se patikilyèman itil paske li pèmèt ou pozisyon enfòmasyon an nan koule nan dokiman an tou pre eleman deklanche a - ki pral anpeche konsèy la soti nan flote lwen eleman nan deklanche pandan yon redimensionnement fenèt.
reta nimewo | objè 0

Reta montre ak kache konsèy zouti a (ms) - pa aplike nan kalite deklanche manyèl

Si yo bay yon nimewo, reta aplike pou tou de kache/montre

Estrikti objè se:delay: { "show": 500, "hide": 100 }
html booleyen fo

Pèmèt HTML nan enfòmasyon an.

Si se vre, tags HTML nan konsèy zouti yo titlepral rann nan konsèy zouti a. Si se fo, yo textpral itilize metòd jQuery pou mete kontni nan DOM la.

Sèvi ak tèks si w enkyete w pou atak XSS.
plasman fisèl | fonksyon 'top'

Ki jan yo pozisyon konsèy la - oto | tèt | anba | kite | dwat.
Lè autoyo espesifye, li pral dinamikman reoryantasyon konsèy la.

Lè yo itilize yon fonksyon pou detèmine plasman an, yo rele li ak ne DOM konsèy kòm premye agiman li yo ak ne DOM eleman deklanche kòm dezyèm li. Kontèks thisla mete sou egzanp konsèy la.
seleksyon fisèl | fo fo Si yo bay yon seleksyon, objè konsèy yo pral delege nan sib yo espesifye. Nan pratik, sa a yo itilize pou aplike tou konsèy sou eleman DOM ( jQuery.onsipò). Gade sa a ak yon egzanp enfòmatif .
modèl fisèl '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Sèvi ak HTML de baz lè w ap kreye enfòmasyon an.

Yo titlepral enjekte konsèy zouti a nan .tooltip-inner.

.arrowpral tounen flèch zouti a.

Eleman wrapper ki pi eksteryè a ta dwe gen .tooltipklas la ak role="tooltip".
tit fisèl | eleman | fonksyon ''

Valè tit default si titleatribi pa prezan.

Si yo bay yon fonksyon, yo pral rele l ak thisreferans li yo mete nan eleman ke konsèy zouti a tache ak.
deklanche fisèl 'konsantre sou plan'

Ki jan konsèy zouti yo deklanche - klike sou | hover | konsantre | manyèl. Ou ka pase plizyè deklanche; separe yo ak yon espas.

'manual'endike ke konsèy zouti a pral deklanche pwogramasyon atravè .tooltip('show'), .tooltip('hide')ak .tooltip('toggle')metòd; valè sa a pa ka konbine avèk okenn lòt deklanche.

'hover'sou pwòp li yo pral lakòz konsèy ki pa ka deklanche atravè klavye a, epi yo ta dwe itilize sèlman si metòd altènatif pou transmèt menm enfòmasyon an pou itilizatè klavye yo prezan.
konpanse nimewo | fisèl | fonksyon 0

Konsantrasyon nan konsèy la anrapò ak sib li yo.

Lè yo itilize yon fonksyon pou detèmine konpanse a, yo rele l ak yon objè ki gen done konpanse a kòm premye agiman li. Fonksyon an dwe retounen yon objè ki gen menm estrikti a. Se eleman deklanche ne DOM la pase kòm dezyèm agiman an.

Pou plis enfòmasyon, al gade nan Docs Offset Popper la .
falbackPlacement fisèl | etalaj 'flip' Pèmèt yo presize ki pozisyon Popper pral itilize sou repli. Pou plis enfòmasyon, al gade nan dokiman konpòtman Popper
customClass fisèl | fonksyon ''

Ajoute klas nan konsèy zouti a lè yo montre li. Remake byen ke yo pral ajoute klas sa yo anplis de nenpòt klas ki espesifye nan modèl la. Pou ajoute plizyè klas, separe yo ak espas: 'a b'.

Ou kapab tou pase yon fonksyon ki ta dwe retounen yon sèl fisèl ki gen non klas adisyonèl.
fwontyè fisèl | eleman 'scrollParent' Fwontyè kontrent debòde nan konsèy zouti a. Aksepte valè 'viewport', 'window', 'scrollParent', oswa yon referans HTMLElement (JavaScript sèlman). Pou plis enfòmasyon, gade nan docs preventOverflow Popper a .
dezenfekte booleyen vre Aktive oswa enfim sanitizasyon an. Si yo aktive 'template'ak 'title'opsyon yo pral dezenfekte. Gade seksyon dezenfektan nan dokiman JavaScript nou an .
lis blan objè Valè default Objè ki gen atribi ak tags pèmèt
sanitizeFn nil | fonksyon nil Isit la ou ka bay pwòp fonksyon dezenfekte ou. Sa a ka itil si ou prefere sèvi ak yon bibliyotèk devwe pou fè dezenfekte.
popperConfig nil | objè nil Pou chanje konfigirasyon Popper default Bootstrap la, gade konfigirasyon Popper la

Done atribi pou konsèy endividyèl yo

Opsyon pou konsèy endividyèl yo ka altènativman espesifye atravè itilizasyon atribi done, jan yo eksplike sa pi wo a.

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

$().tooltip(options)

Tache yon moun ki okipe enfòmasyon sou yon koleksyon eleman.

.tooltip('show')

Revele konsèy zouti yon eleman. Retounen bay moun kap rele a anvan yo te montre enfòmasyon an (sa vle di anvan shown.bs.tooltipevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche nan konsèy la. Konsèy zouti ak tit zewo-longè pa janm parèt.

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

.tooltip('hide')

Kache konsèy yon eleman. Retounen bay moun kap rele a anvan enfòmasyon an te kache (sa vle di anvan hidden.bs.tooltipevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche nan konsèy la.

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

.tooltip('toggle')

Aktivite konsèy zouti yon eleman. Retounen bay moun kap rele a anvan yo te montre enfòmasyon an aktyèlman oswa kache (sa vle di anvan evènman shown.bs.tooltipan hidden.bs.tooltiprive). Sa a konsidere kòm yon "manyèl" deklanche nan konsèy la.

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

.tooltip('dispose')

Kache epi detwi ti konsèy yon eleman. Konsèy zouti ki sèvi ak delegasyon (ki kreye lè l sèvi avèk opsyon selectoran ) pa ka detwi endividyèlman sou eleman deklanche desandan yo.

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

.tooltip('enable')

Bay enfòmasyon yon eleman nan kapasite pou yo montre. Ti konsèy yo aktive pa default.

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

.tooltip('disable')

Retire kapasite pou yo montre konsèy yon eleman. Konsèy zouti a pral sèlman kapab montre si li re-aktive.

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

.tooltip('toggleEnabled')

Aktivite kapasite pou konsèy yon eleman yo dwe montre oswa kache.

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

.tooltip('update')

Mete ajou pozisyon ti konsèy yon eleman.

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

Evènman

Kalite Evènman Deskripsyon
montre.bs.tooltip Evènman sa a dife imedyatman lè yo showrele metòd egzanp lan.
montre.bs.tooltip Evènman sa a revoke lè konsèy zouti a vin vizib pou itilizatè a (ap tann tranzisyon CSS yo fini).
kache.bs.tooltip Evènman sa a te tire imedyatman lè yo hidete rele metòd egzanp lan.
hidden.bs.tooltip Evènman sa a revoke lè konsèy zouti a fini kache pou itilizatè a (ap tann pou tranzisyon CSS fini).
inserted.bs.tooltip Evènman sa a revoke apre show.bs.tooltipevènman an lè yo te ajoute modèl konsèy zouti a nan DOM la. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})