Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
in English

Konsèy zouti

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

Apèsi sou lekòl la

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

  • Tooltips konte sou 3yèm pati bibliyotèk Popper 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!
  • 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-bs-toggleatribi yo:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

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. Enstriksyon yo reflete lè w ap itilize Bootstrap nan RTL.

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

Epi ak HTML koutim te ajoute:

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

Avèk yon SVG:

Sass

Varyab

$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:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

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:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, 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 sa a, mete boundaryopsyon a (pou modifye a baskile lè l sèvi avèk popperConfigopsyon a) nan nenpòt HTMLElement pou pase sou valè default la, 'clippingParents', tankou document.body:

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

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-bs-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="tooltip-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".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" 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-bs-, tankou nan data-bs-animation="". Asire w ke w chanje kalite ka a nan non opsyon an soti nan camelCase nan kebab-case lè w ap pase opsyon yo atravè atribi done yo. Pou egzanp, olye pou yo itilize data-bs-customClass="beautifier", sèvi ak data-bs-custom-class="beautifier".

Remake byen ke pou rezon sekirite yo pa ka bay opsyon sanitize, sanitizeFn, ak atribi done yo.allowList
Non Kalite Default Deskripsyon
animation booleyen true Aplike yon tranzisyon CSS fennen nan konsèy zouti a
container fisèl | eleman | fo false

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.

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

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, innerTextyo pral itilize pwopriyete pou mete kontni nan DOM la.

Sèvi ak tèks si w enkyete w pou atak XSS.

placement fisèl | fonksyon 'top'

Ki jan yo pozisyon konsèy la - oto | tèt | anba | kite | dwat.
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.

selector fisèl | fo false 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 .
template fisèl '<div class="tooltip" role="tooltip"><div class="tooltip-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.

.tooltip-arrowpral tounen flèch zouti a.

Eleman wrapper ki pi eksteryè a ta dwe gen .tooltipklas la ak role="tooltip".

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

trigger fisèl 'hover focus'

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è .show(), .hide()ak .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.

fallbackPlacements etalaj ['top', 'right', 'bottom', 'left'] Defini plasman sere lè w bay yon lis plasman nan etalaj (nan lòd preferans). Pou plis enfòmasyon, al gade nan dokiman konpòtman Popper
boundary fisèl | eleman 'clippingParents' Limit kontrent debòde nan konsèy zouti a (aplike sèlman nan modifye preventOverflow Popper a). Pa default li a 'clippingParents'epi li ka aksepte yon referans HTMLElement (via JavaScript sèlman). Pou plis enfòmasyon, gade nan docs detectOverflow Popper a .
customClass fisèl | fonksyon ''

Ajoute klas yo 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: 'class-1 class-2'.

Ou kapab tou pase yon fonksyon ki ta dwe retounen yon sèl fisèl ki gen non klas adisyonèl.

sanitize booleyen true Aktive oswa enfim sanitizasyon an. Si yo aktive 'template'ak 'title'opsyon yo pral dezenfekte. Gade seksyon dezenfektan nan dokiman JavaScript nou an .
allowList objè Valè default Objè ki gen atribi ak tags pèmèt
sanitizeFn nil | fonksyon null 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.
offset etalaj | fisèl | fonksyon [0, 0]

Konsantrasyon nan konsèy la anrapò ak sib li yo. Ou ka pase yon fisèl nan atribi done ak valè separe vigil tankou:data-bs-offset="10,20"

Lè yo itilize yon fonksyon pou detèmine konpanse a, yo rele l ak yon objè ki genyen plasman popper a, referans a, ak popper rects kòm premye agiman li. Se eleman deklanche ne DOM la pase kòm dezyèm agiman an. Fonksyon an dwe retounen yon etalaj ki gen de nimewo: .[skidding, distance]

Pou plis enfòmasyon, al gade nan Docs Offset Popper la .

popperConfig nil | objè | fonksyon null

Pou chanje konfigirasyon Popper default Bootstrap la, gade konfigirasyon Popper la .

Lè yo itilize yon fonksyon pou kreye konfigirasyon Popper la, yo rele l ak yon objè ki gen konfigirasyon Popper default Bootstrap la. Li ede ou itilize ak rantre default la ak pwòp konfigirasyon ou. Fonksyon an dwe retounen yon objè konfigirasyon pou Popper.

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.

Sèvi ak fonksyon akpopperConfig

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

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 .

montre

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.

tooltip.show()

kache

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.

tooltip.hide()

baskile

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.

tooltip.toggle()

jete

Kache epi detwi ti konsèy yon eleman (Retire done ki estoke sou eleman DOM). 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.

tooltip.dispose()

pèmèt

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

tooltip.enable()

enfim

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

tooltip.disable()

toggleEnabled

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

tooltip.toggleEnabled()

aktyalizasyon

Mete ajou pozisyon ti konsèy yon eleman.

tooltip.update()

getInstance

Metòd estatik ki pèmèt ou jwenn egzanp enfòmasyon ki asosye ak yon eleman DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Metòd estatik ki pèmèt ou jwenn yon egzanp zouti ki asosye ak yon eleman DOM, oswa kreye yon nouvo si li pa te inisyalize.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Evènman

Kalite evènman Deskripsyon
show.bs.tooltip Evènman sa a dife imedyatman lè yo showrele metòd egzanp lan.
shown.bs.tooltip Evènman sa a revoke lè konsèy zouti a vin vizib pou itilizatè a (ap tann tranzisyon CSS yo fini).
hide.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.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()