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.js
ki 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
.disabled
oswadisabled
eleman 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.
prefers-reduced-motion
rechè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-toggle
atribi 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 auto
akscroll
Pozisyon Tooltip eseye chanje otomatikman lè yon veso paran gen overflow: auto
oswa overflow: scroll
renmen nou an .table-responsive
, men li toujou kenbe pozisyon plasman orijinal la. Pou rezoud sa a, mete boundary
opsyon a (pou modifye a baskile lè l sèvi avèk popperConfig
opsyon 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 data
atribi epi title
sou 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 top
pa 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 hover
kò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 disabled
atribi 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 non opsyon an soti nan camelCase a kebab-case lè w ap pase opsyon yo atravè atribi done yo. Pa egzanp, olye pou yo itilize data-bs-customClass="beautifier"
, sèvi ak data-bs-custom-class="beautifier"
.
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: |
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: |
html |
booleyen | false |
Pèmèt HTML nan enfòmasyon an. Si se vre, tags HTML nan konsèy zouti yo 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. 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 |
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.on sipò). 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
Eleman wrapper ki pi eksteryè a ta dwe gen |
title |
fisèl | eleman | fonksyon | '' |
Valè tit default si Si yo bay yon fonksyon, yo pral rele l 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.
|
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 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: 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: 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: . 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 .
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.tooltip
evè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.tooltip
evè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.tooltip
an hidden.bs.tooltip
rive). 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 selector
an ) 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 egzanp 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 show rele 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 hide te 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.tooltip evè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()