Tooltips
Dokumintaasje en foarbylden foar it tafoegjen fan oanpaste Bootstrap-arktips mei CSS en JavaScript mei CSS3 foar animaasjes en data-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! - As jo ús JavaScript bouwe fanút boarne, fereasket
util.js
it . - 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-toggle
attribút:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
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.
<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>
En mei oanpast HTML tafoege:
<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>
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:
$('#example').tooltip(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 op te lossen, set de boundary
opsje op wat oars dan standertwearde, 'scrollParent'
, lykas 'window'
:
$('#example').tooltip({ boundary: 'window' })
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-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>
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 út in wrapper <div>
of <span>
, ideaal makke toetseboerd-fokusber makke mei tabindex="0"
, en oerskriuwe it pointer-events
op it útskeakele elemint.
<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>
Opsjes
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-animation=""
.
sanitize
,
sanitizeFn
en
whiteList
opsjes kinne net wurde levere mei gegevens attributen.
Namme | Type | Standert | Beskriuwing |
---|---|---|---|
animaasje | boolean | wier | Tapasse in CSS-fade-oergong op de tooltip |
kontener | string | elemint | falsk | falsk | Foegje de tooltip ta oan in spesifyk elemint. Foarbyld |
fertraging | 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 | falsk | Tastean HTML yn de tooltip. As wier, wurde HTML-tags yn 'e tooltip Brûk tekst as jo soargen meitsje oer XSS-oanfallen. |
pleatsing | 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 | falsk | 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 . |
sjabloan | string | '<div class="tooltip" role="tooltip"><div class="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 |
titel | string | elemint | funksje | '' | Standert titelwearde as As in funksje wurdt jûn, wurdt it neamd mei syn |
trekker | string | 'fokus fokus' | Hoe tooltip wurdt aktivearre - klik | sweef | fokus | hantlieding. Jo kinne meardere triggers trochjaan; skiede se mei in romte.
|
offset | nûmer | string | funksje | 0 | Offset fan de tooltip relatyf oan syn doel. As in funksje brûkt wurdt om de offset te bepalen, wurdt it neamd mei in objekt dat de offsetgegevens as it earste argumint befettet. De funksje moat in objekt weromjaan mei deselde struktuer. It triggerelemint DOM-knooppunt wurdt trochjûn as it twadde argumint. Foar mear ynformaasje ferwize nei Popper's offset -dokuminten . |
fallbackPlacement | string | array | 'flip' | Tastean om oan te jaan hokker posysje Popper sil brûke by fallback. Foar mear ynformaasje ferwize nei Popper's gedrachsdokuminten |
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. |
skieding | string | elemint | 'scrollParent' | Overflow beheining grins fan de tooltip. Akseptearret de wearden fan 'viewport' , 'window' , 'scrollParent' , of in HTMLElement-referinsje (allinich JavaScript). Foar mear ynformaasje ferwize nei Popper's preventOverflow-dokuminten . |
sanitize | boolean | wier | De sanearring ynskeakelje of útskeakelje. As aktivearre 'template' en 'title' opsjes sille wurde sanearre. Sjoch de seksje fan sanitizer yn ús JavaScript-dokumintaasje . |
whiteList | 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. |
popperConfig | null | objekt | null | Om de standert Popper-konfiguraasje fan Bootstrap te feroarjen, sjoch Popper's konfiguraasje |
Data attributen foar yndividuele tooltips
Opsjes foar yndividuele tooltips kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen, lykas hjirboppe útlein.
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 .
$().tooltip(options)
Hechtet in tooltip handler oan in elemint kolleksje.
.tooltip('show')
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.
$('#element').tooltip('show')
.tooltip('hide')
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.
$('#element').tooltip('hide')
.tooltip('toggle')
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.
$('#element').tooltip('toggle')
.tooltip('dispose')
Ferberget en ferneatiget de tooltip fan in elemint. Tooltips dy't delegaasje brûke (dy't makke binne mei de selector
opsje ) kinne net yndividueel ferneatige wurde op ôfstammende trigger-eleminten.
$('#element').tooltip('dispose')
.tooltip('enable')
Jout de tooltip fan in elemint de mooglikheid om te sjen. Tooltips binne standert ynskeakele.
$('#element').tooltip('enable')
.tooltip('disable')
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.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Wizigje de mooglikheid om de tooltip fan in elemint te sjen of te ferbergjen.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Updatet de posysje fan de tooltip fan in elemint.
$('#element').tooltip('update')
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). |
ynfoege.bs.tooltip | Dit evenemint wurdt ûntslein nei it show.bs.tooltip barren as de tooltip-sjabloan is tafoege oan de DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})