Tooltips
Dokumintaasje en foarbylden foar it tafoegjen fan oanpaste Bootstrap-arktips mei CSS en JavaScript mei CSS3 foar animaasjes en data-bs-attributen foar lokale titelopslach.
Oersicht
Dingen om te witten by it brûken fan de tooltip-plugin:
- Tooltips fertrouwe op de 3rd party bibleteek Popper foar posisjonearring. Jo moatte popper.min.js opnimme foardat bootstrap.js of brûke
bootstrap.bundle.min.js
/bootstrap.bundle.js
dy't Popper befettet om tooltips te wurkjen! - Tooltips binne opt-in foar prestaasjesredenen, dus jo moatte se sels inisjalisearje .
- Tooltips mei titels fan nul lingte wurde nea werjûn.
- Spesifisearje
container: 'body'
om it werjaan fan problemen yn kompleksere komponinten te foarkommen (lykas ús ynfiergroepen, knopgroepen, ensfh.). - It triggerjen fan tooltips op ferburgen eleminten sil net wurkje.
- Tooltips foar
.disabled
ofdisabled
eleminten moatte wurde aktivearre op in wrapper elemint. - Wannear't aktivearre wurdt fan hyperlinks dy't meardere rigels oerspant, sille tooltips sintraal wurde. Brûk
white-space: nowrap;
op jo<a>
s om dit gedrach te foarkommen. - Tooltips moatte ferburgen wurde foardat de oerienkommende eleminten fan 'e DOM fuortsmiten binne.
- Tooltips kinne wurde aktivearre troch in elemint binnen in skaad DOM.
prefers-reduced-motion
mediafraach. Sjoch de
seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .
Hast dat alles? Geweldich, lit ús sjen hoe't se wurkje mei guon foarbylden.
Foarbyld: Aktivearje tooltips oeral
Ien manier om alle tooltips op in side te inisjalisearjen soe wêze om se te selektearjen troch har data-bs-toggle
attribút:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Foarbylden
Hoverje oer de keppelings hjirûnder om tooltips te sjen:
Plakhâldertekst om wat ynline keppelings te demonstrearjen mei tooltips. Dit is no gewoan filler, gjin moardner. Ynhâld pleatst hjir gewoan om de oanwêzigens fan echte tekst te imitearjen . En dat alles gewoan om jo in idee te jaan fan hoe't tooltips der útsjen soene as se brûkt wurde yn echte situaasjes. Dus hooplik hawwe jo no sjoen hoe't dizze tooltips oer keppelings yn 'e praktyk kinne wurkje, as jo se ienris op jo eigen side of projekt brûke.
Hoverje oer de knoppen hjirûnder om de fjouwer tooltips-rjochtings te sjen: boppe, rjochts, ûnder en lofts. Rjochtingen wurde spegele by it brûken fan Bootstrap yn 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>
En mei oanpast HTML tafoege:
<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>
Mei in SVG:
Sass
Fariabelen
$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;
Gebrûk
De tooltip-plugin genereart ynhâld en markearring op fraach, en pleatst standert tooltips nei har trigger-elemint.
Trigger de tooltip fia JavaScript:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Oerfloed auto
enscroll
Tooltip-posysje besiket automatysk te feroarjen as in âlderkontener ús hat overflow: auto
of overflow: scroll
liket .table-responsive
, mar hâldt de posysje fan 'e orizjinele pleatsing noch altyd. Om dit op te lossen, set de boundary
opsje (foar de flipmodifier mei de popperConfig
opsje) yn op elk HTMLElement om de standertwearde, , te oerskriuwen 'clippingParents'
, lykas document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Markup
De fereaske markup foar in tooltip is allinich in data
attribút en title
op it HTML-elemint wolle jo in tooltip hawwe. De generearre markup fan in tooltip is frij ienfâldich, hoewol it in posysje fereasket (standert, ynsteld top
troch de plugin).
Tooltips meitsje foar brûkers fan toetseboerd en assistinte technology
Jo moatte allinich tooltips tafoegje oan HTML-eleminten dy't tradisjoneel toetseboerdfokusber en ynteraktyf binne (lykas keppelings of formulierkontrôles). Hoewol't willekeurige HTML-eleminten (lykas <span>
s) fokusber makke wurde kinne troch it tafoegjen fan it tabindex="0"
attribút, sil dit potinsjeel ferfelende en betiizjende ljepperstops tafoegje op net-ynteraktive eleminten foar toetseboerdbrûkers, en de measte assistive technologyen kundigje op it stuit de tooltip net yn dizze situaasje oan. Fertrou net allinich op hover
as de trigger foar jo tooltip, om't dit jo tooltips ûnmooglik meitsje sil foar toetseboerdbrûkers.
<!-- 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>
Utskeakele eleminten
Eleminten mei it disabled
attribút binne net ynteraktyf, wat betsjut dat brûkers net kinne fokusje, hoverje of klikke om in tooltip (of popover) te triggerjen. As oplossing wolle jo de tooltip fan in wrapper <div>
of <span>
, ideaal makke toetseboerd-fokusber makke mei 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>
Opsjes
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-bs-
, lykas yn data-bs-animation=""
. Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan camelCase nei kebab-case as jo de opsjes trochjaan fia gegevensattributen. Bygelyks, ynstee fan te brûken data-bs-customClass="beautifier"
, brûk dan data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, en
allowList
opsjes net kinne wurde levere mei gegevensattributen.
Namme | Type | Standert | Beskriuwing |
---|---|---|---|
animation |
boolean | true |
Tapasse in CSS-fade-oergong op de tooltip |
container |
string | elemint | falsk | false |
Foegje de tooltip ta oan in spesifyk elemint. Foarbyld |
delay |
nûmer | objekt | 0 |
Fertrage it sjen en ferbergjen fan de tooltip (ms) - jildt net foar manuele triggertype As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show Objektstruktuer is: |
html |
boolean | false |
Tastean HTML yn de tooltip. As wier, wurde HTML-tags yn 'e tooltip Brûk tekst as jo soargen meitsje oer XSS-oanfallen. |
placement |
string | funksje | 'top' |
Hoe kinne jo de tooltip pleatse - auto | top | ûnderen | lofts | rjochts. As in funksje brûkt wurdt om de pleatsing te bepalen, wurdt it neamd mei de tooltip DOM-knooppunt as syn earste argumint en it triggerelemint DOM-knooppunt as syn twadde. De |
selector |
string | falsk | false |
As in selector wurdt foarsjoen, sil tooltip objekten wurde delegearre oan de oantsjutte doelen. Yn 'e praktyk wurdt dit brûkt om ek tooltips oan te passen op dynamysk tafoege DOM-eleminten ( jQuery.on stipe). Sjoch dit en in ynformatyf foarbyld . |
template |
string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Basis HTML om te brûken by it meitsjen fan de tooltip. De tooltip's
De bûtenste wrapper elemint moat hawwe de |
title |
string | elemint | funksje | '' |
Standert titelwearde as As in funksje wurdt jûn, wurdt it neamd mei syn |
trigger |
string | 'hover focus' |
Hoe tooltip wurdt aktivearre - klik | sweef | fokus | hantlieding. Jo kinne meardere triggers trochjaan; skiede se mei in romte.
|
fallbackPlacements |
array | ['top', 'right', 'bottom', 'left'] |
Definiearje fallback-pleatsingen troch in list fan pleatsingen yn array te jaan (yn folchoarder fan foarkar). Foar mear ynformaasje ferwize nei Popper's gedrachsdokuminten |
boundary |
string | elemint | 'clippingParents' |
Overflow beheining grins fan de tooltip (jildt allinnich foar Popper syn preventOverflow modifier). Standert is it 'clippingParents' en kin it in HTMLElement-referinsje akseptearje (allinich fia JavaScript). Foar mear ynformaasje ferwize nei Popper's detectOverflow-dokuminten . |
customClass |
string | funksje | '' |
Foegje klassen ta oan de tooltip as it wurdt werjûn. Tink derom dat dizze klassen sille wurde tafoege neist alle klassen oantsjutte yn it sjabloan. Om meardere klassen ta te foegjen, skiede se mei spaasjes: Jo kinne ek in funksje trochjaan dy't in inkele tekenrige moat weromjaan mei ekstra klassenammen. |
sanitize |
boolean | true |
De sanearring ynskeakelje of útskeakelje. As aktivearre 'template' en 'title' opsjes sille wurde sanearre. Sjoch de seksje fan sanitizer yn ús JavaScript-dokumintaasje . |
allowList |
objekt | Standertwearde | Objekt dat tastiene attributen en tags befettet |
sanitizeFn |
null | funksje | null |
Hjir kinne jo jo eigen sanearringsfunksje leverje. Dit kin handich wêze as jo leaver in tawijd bibleteek brûke om sanitaasje út te fieren. |
offset |
rige | string | funksje | [0, 0] |
Offset fan de tooltip relatyf oan syn doel. Jo kinne in tekenrige trochjaan yn gegevensattributen mei komma-skieden wearden lykas: As in funksje brûkt wurdt om de offset te bepalen, wurdt it neamd mei in objekt dat de popper pleatsing, de referinsje en popperrects as syn earste argumint befettet. It triggerelemint DOM-knooppunt wurdt trochjûn as it twadde argumint. De funksje moat in array weromjaan mei twa nûmers: . Foar mear ynformaasje ferwize nei Popper's offset -dokuminten . |
popperConfig |
null | objekt | funksje | null |
Om de standert Popper-konfiguraasje fan Bootstrap te feroarjen, sjoch Popper's konfiguraasje . As in funksje wurdt brûkt om de Popper-konfiguraasje te meitsjen, wurdt it neamd mei in objekt dat de standert Popper-konfiguraasje fan de Bootstrap befettet. It helpt jo de standert te brûken en te fusearjen mei jo eigen konfiguraasje. De funksje moat werom in konfiguraasje foarwerp foar Popper. |
Data attributen foar yndividuele tooltips
Opsjes foar yndividuele tooltips kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen, lykas hjirboppe útlein.
Mei help fan funksje meipopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metoaden
Asynchrone metoaden en transysjes
Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .
sjen litte
Iepenet de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip wirklik werjûn is (dus foardat it shown.bs.tooltip
barren bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip. Tooltips mei titels fan nul lingte wurde nea werjûn.
tooltip.show()
ferstopje
Ferberget de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip eins ferburgen is (dus foardat it hidden.bs.tooltip
barren bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip.
tooltip.hide()
wikselje
Skeakelt de tooltip fan in elemint. Keart werom nei de beller foardat de tooltip wirklik werjûn of ferburgen is (dus foardat it barren shown.bs.tooltip
of hidden.bs.tooltip
bart). Dit wurdt beskôge as in "hânlieding" triggering fan de tooltip.
tooltip.toggle()
disponearje
Ferberget en ferneatiget de tooltip fan in elemint (Ferwidert bewarre gegevens op it DOM-elemint). Tooltips dy't delegaasje brûke (dy't makke binne mei de selector
opsje ) kinne net yndividueel ferneatige wurde op ôfstammende trigger-eleminten.
tooltip.dispose()
ynskeakelje
Jout de tooltip fan in elemint de mooglikheid om te sjen. Tooltips binne standert ynskeakele.
tooltip.enable()
útskeakelje
Ferwidert de mooglikheid om de tooltip fan in elemint te sjen. De tooltip sil allinich te sjen wêze kinne as it opnij ynskeakele is.
tooltip.disable()
toggleEnabled
Wizigje de mooglikheid om de tooltip fan in elemint te sjen of te ferbergjen.
tooltip.toggleEnabled()
update
Updatet de posysje fan de tooltip fan in elemint.
tooltip.update()
getInstance
Statyske metoade wêrmei jo de tooltip-eksimplaar kinne krije ferbûn mei in DOM-elemint
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
Statyske metoade wêrmei jo de tooltip-eksimplaar kinne krije dy't assosjeare is mei in DOM-elemint, of in nij oanmeitsje foar it gefal dat it net inisjalisearre is
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Eveneminten
Event type | Beskriuwing |
---|---|
show.bs.tooltip |
Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen. |
shown.bs.tooltip |
Dit evenemint wurdt ûntslein as de tooltip sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
hide.bs.tooltip |
Dit barren wurdt fuortendaliks ûntslein as de hide eksimplaarmetoade oanroppen is. |
hidden.bs.tooltip |
Dit evenemint wurdt ûntslein as de tooltip klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). |
inserted.bs.tooltip |
Dit evenemint wurdt ûntslein nei it show.bs.tooltip barren as de tooltip-sjabloan is tafoege oan de DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()