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.
Dingen om te witten by it brûken fan de tooltip-plugin:
- Tooltips fertrouwe op de 3rd party bibleteek Popper.js foar posisjonearring. Jo moatte popper.min.js opnimme foardat bootstrap.js of brûke
bootstrap.bundle.min.js
/bootstrap.bundle.js
dy't Popper.js 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.
Hast dat alles? Geweldich, lit ús sjen hoe't se wurkje mei guon foarbylden.
Ien manier om alle tooltips op in side te inisjalisearjen soe wêze om se te selektearjen troch har data-toggle
attribút:
Hoverje oer de keppelings hjirûnder om tooltips te sjen:
Strakke broek folgjende nivo keffiyeh jo hawwe wierskynlik net heard fan harren. Photo booth baard rau denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duorsume quinoa 8-bit Amerikaanske klean hawwe in terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fjouwer loko mcsweeney's reinigje vegan chambray. In echt iroanysk ambachtsman wat keytar , scenester farm-to-table banksy Austin twitter handle freegan cred rauwe denim single-origin kofje virale.
Hoverje oer de knoppen hjirûnder om de fjouwer tooltips-rjochtings te sjen: boppe, rjochts, ûnder en lofts.
En mei oanpast HTML tafoege:
De tooltip-plugin genereart ynhâld en markearring op fraach, en pleatst standert tooltips nei har trigger-elemint.
Trigger de tooltip fia JavaScript:
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. Derneist kundigje de measte assistive technologyen op it stuit de tooltip yn dizze situaasje net oan.
Fertrou net allinich op hover
as de trigger foar jo tooltip, om't dit jo tooltips ûnmooglik meitsje sil foar toetseboerdbrûkers.
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 kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-animation=""
.
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 dynamyske HTML-ynhâld yn te skeakeljen om popovers tafoege te hawwen. 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 | 0 | Offset fan de tooltip relatyf oan syn doel. Foar mear ynformaasje ferwize nei de offsetdokuminten fan Popper.js . |
fallbackPlacement | string | array | 'flip' | Tastean om oan te jaan hokker posysje Popper sil brûke by fallback. Foar mear ynformaasje ferwize nei Popper.js's gedrachsdokuminten |
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.js's preventOverflow-dokuminten . |
Data attributen foar yndividuele tooltips
Opsjes foar yndividuele tooltips kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen, lykas hjirboppe útlein.
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 .
Hechtet in tooltip handler oan in elemint kolleksje.
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.
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.
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.
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.
Jout de tooltip fan in elemint de mooglikheid om te sjen. Tooltips binne standert ynskeakele.
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.
Wizigje de mooglikheid om de tooltip fan in elemint te sjen of te ferbergjen.
Updatet de posysje fan de tooltip fan in elemint.
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. |