Source

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 bibliyotèk twazyèm pati Popper.js pou pwezante. Ou dwe mete popper.min.js anvan bootstrap.js oswa itilize bootstrap.bundle.min.js/ bootstrap.bundle.jski gen Popper.js 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.

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:

Pantalon sere pwochen nivo keffiyeh ou pwobableman pa te tande pale de yo. Photo Booth bab kri abako letterpress vegan mesaje sak stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american clothing gen yon terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofou biodiesel williamsburg marfa, kat loko Mcsweeney a netwaye vegan chambray. Yon atizan vrèman ironik kèlkeswa keytar , scenester farm-to-table banksy Austin twitter manch freegan cred raw denim sèl-orijin kafe viral.

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 a pral ajoute tab ki kapab anmèdan ak konfizyon sou eleman ki pa entèaktif pou itilizatè klavye yo. Anplis de sa, pifò teknoloji asistans yo kounye a pa anonse enfòmasyon an 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="".

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 0 Konsantrasyon nan konsèy la anrapò ak sib li yo. Pou plis enfòmasyon, gade nan dokiman konpanse Popper.js 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.js
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.js .

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