Tooltips
Dokumentatioun an Beispiller fir personaliséiert Bootstrap Tooltips mat CSS a JavaScript ze addéieren mat CSS3 fir Animatiounen an Datenattributer fir lokal Titellagerung.
Iwwersiicht
Saachen ze wëssen wann Dir den Tooltip Plugin benotzt:
- Tooltips vertrauen op der Drëtt Partei Bibliothéik Popper fir positionéieren. Dir musst Popper.min.js virum bootstrap.js enthalen oder benotzen
bootstrap.bundle.min.js
/bootstrap.bundle.js
déi Popper enthält fir datt Tooltipps funktionnéieren! - Wann Dir eis JavaScript aus der Quell baut, brauch
util.js
et . - Tooltips sinn opt-in aus Leeschtungsgrënn, also musst Dir se selwer initialiséieren .
- Tooltips mat Null-Längt Titelen ginn ni ugewisen.
- Spezifizéieren
container: 'body'
fir Rendering Probleemer a méi komplexe Komponenten ze vermeiden (wéi eis Inputgruppen, Knäppchengruppen, etc.). - Ausléiser Tooltips op verstoppte Elementer funktionnéieren net.
- Tooltips fir
.disabled
oderdisabled
Elementer muss op engem wrapper Element ausgeléist ginn. - Wann aus Hyperlinks ausgeléist gëtt, déi méi Zeilen spanen, ginn Tooltips zentréiert. Benotzt
white-space: nowrap;
op Är<a>
s dëst Verhalen ze vermeiden. - Tooltips musse verstoppt ginn ier hir entspriechend Elementer aus der DOM geläscht ginn.
- Tooltips kënnen ausgeléist ginn duerch en Element an engem Schied DOM.
prefers-reduced-motion
Medienufro of. Kuckt d'
Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .
Huet dat alles? Super, loosst eis kucken wéi se mat e puer Beispiller funktionnéieren.
Beispill: Aktivéiert Tooltips iwwerall
Ee Wee fir all Tooltipps op enger Säit ze initialiséieren wier se duerch hiren data-toggle
Attribut ze wielen:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Beispiller
Hover iwwer d'Links hei drënner fir Tooltipps ze gesinn:
Placeholder Text fir e puer Inline Links mat Tooltips ze demonstréieren. Dëst ass elo just Filler, kee Killer. Inhalt hei gesat just fir d'Präsenz vum richtegen Text ze mimikéieren . An dat alles just fir Iech eng Iddi ze ginn wéi Tooltips ausgesinn wann se an real-Welt Situatiounen benotzt ginn. Also hoffentlech hutt Dir elo gesinn wéi dës Tooltipps iwwer Linken an der Praxis funktionéiere kënnen, wann Dir se op Ärem eegene Site oder Projet benotzt.
Hover iwwer d'Knäppercher hei drënner fir déi véier Tooltips Richtungen ze gesinn: uewen, riets, ënnen a lénks.
<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>
A mat personaliséierten HTML dobäigesat:
<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>
Benotzung
Den Tooltip Plugin generéiert Inhalt a Markup op Ufro, a setzt als Standard Tooltip no hirem Ausléiserelement.
Ausléiser den Tooltip iwwer JavaScript:
$('#example').tooltip(options)
Iwwerschwemmung auto
anscroll
Tooltip Positioun probéiert automatesch z'änneren wann en Elterendeel Container huet overflow: auto
oder overflow: scroll
wéi eis .table-responsive
, awer hält ëmmer d'originell Plazéierungspositioun. Fir ze léisen, setzt d' boundary
Optioun op alles anescht wéi Standardwäert, 'scrollParent'
, wéi 'window'
:
$('#example').tooltip({ boundary: 'window' })
Markup
Déi erfuerderlech Markup fir e Tooltip ass nëmmen en data
Attribut an title
am HTML Element wëllt Dir e Tooltip hunn. De generéierte Markup vun engem Tooltip ass zimmlech einfach, awer et erfuerdert eng Positioun (par défaut, top
vum Plugin gesat).
Maacht Tooltips fir Tastatur an Hëllefstechnologie Benotzer ze schaffen
Dir sollt nëmmen Tooltipps un HTML Elementer addéieren déi traditionell Tastatur fokusséierbar an interaktiv sinn (wéi Linken oder Form Kontrollen). Och wann arbiträr HTML Elementer (wéi <span>
s) fokusséierbar gemaach kënne ginn andeems d' tabindex="0"
Attribut bäigefüügt gëtt, wäert dëst potenziell lästeg a konfus Tabstoppen op net-interaktiven Elementer fir Tastaturbenotzer addéieren, an déi meescht Assistenztechnologien annoncéieren de Moment net den Tooltip an dëser Situatioun. Zousätzlech, vertrau net eleng op hover
den Ausléiser fir Ären Tooltip, well dëst wäert Är Tooltipps onméiglech maachen fir Tastatur Benotzer auszeléisen.
<!-- 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>
Behënnert Elementer
Elementer mat dem disabled
Attribut sinn net interaktiv, dat heescht d'Benotzer kënnen net fokusséieren, hoveren oder klicken fir en Tooltip (oder Popover) auszeléisen. Als Ëmgéigend wëllt Dir den Tooltip aus engem Wrapper ausléisen <div>
oder <span>
, Idealfall gemaach Keyboard-fokusséierbar mat tabindex="0"
, an iwwerschreiden den pointer-events
op de behënnerte Element.
<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>
Optiounen
Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-
, wéi an data-animation=""
.
sanitize
,
sanitizeFn
an
d' whiteList
Optioune kënnen net mat Datenattributer geliwwert ginn.
Numm | Typ | Default | Beschreiwung |
---|---|---|---|
Animatioun | boolesch | wouer | Fëllt en CSS Fade Iwwergank op den Tooltip un |
Container | streng | Element | falsch | falsch | Fügt den Tooltip un e spezifescht Element un. Beispill |
Retard | Zuel | Objet | 0 | Verspéidung vun der Tooltip (ms) ze weisen an ze verstoppen - gëllt net fir manuell Ausléisertyp Wann eng Zuel geliwwert gëtt, gëtt Verspéidung fir béid verstoppen / weisen applizéiert Objektstruktur ass: |
html | boolesch | falsch | Erlaabt HTML am Tooltip. Wann et richteg ass, ginn HTML-Tags an den Tooltip am Tooltip Benotzt Text wann Dir Iech Suergen iwwer XSS Attacken hutt. |
Placement | streng | Funktioun | 'top' | Wéi positionéiert de Tooltip - Auto | erop | ënnen | lénks | riets. Wann eng Funktioun benotzt gëtt fir d'Placement ze bestëmmen, gëtt se mam Tooltip DOM Node als éischt Argument an dem Ausléiserelement DOM Node als zweet genannt. De |
selector | streng | falsch | falsch | Wann e Selektor zur Verfügung gestallt gëtt, ginn Tooltip-Objeten op déi spezifizéiert Ziler delegéiert. An der Praxis gëtt dëst benotzt fir Tooltipps och op dynamesch dobäigesate DOM Elementer ( jQuery.on Ënnerstëtzung) anzesetzen. Kuckt dëst an en informativt Beispill . |
Schabloun | String | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Baséiert HTML fir ze benotzen wann Dir den Tooltip erstellt. D'Tooltip
Dat äusserst Wrapperelement soll d' |
Titel | streng | Element | Funktioun | '' | Standard Titelwäert wann Wann eng Funktioun uginn ass, gëtt se mat senger |
ausléisen | String | 'Hover focus' | Wéi Tooltip ausgeléist gëtt - klickt | huel | konzentréieren | manuell. Dir kënnt verschidde Ausléiser passéieren; trennt se mat engem Raum.
|
offset | Zuel | streng | Funktioun | 0 | Offset vum Tooltip relativ zu sengem Zil. Wann eng Funktioun benotzt gëtt fir den Offset ze bestëmmen, gëtt se mat engem Objet genannt, deen d'Offsetdaten als säin éischten Argument enthält. D'Funktioun muss en Objet mat der selwechter Struktur zréckginn. Den Ausléiserelement DOM Node gëtt als zweet Argument weidergeleet. Fir méi Informatioun kuckt op dem Popper seng Offset Docs . |
fallbackPlacement | streng | Array | 'flippen' | Erlaabt ze spezifizéieren wéi eng Positioun Popper op Fallback benotzt. Fir méi Informatioun, kuckt op dem Popper seng Verhalensdokumenter |
customClass | streng | Funktioun | '' | Füügt Klassen un den Tooltip wann et gewise gëtt. Bedenkt datt dës Klassen zousätzlech zu all Klassen, déi an der Schabloun uginn sinn, bäigefüügt ginn. Fir méi Klassen ze addéieren, trennt se mat Plazen Dir kënnt och eng Funktioun weiderginn, déi eng eenzeg String mat zousätzlech Klassennimm zréckginn soll. |
Grenz | streng | element | 'scrollParent' | Iwwerschwemmungsgrenze vum Tooltip. Akzeptéiert d'Wäerter vun 'viewport' , 'window' , 'scrollParent' oder eng HTMLElement Referenz (nëmmen JavaScript). Fir méi Informatioun, kuckt op Popper's preventOverflow Dokumenter . |
sanitize | boolesch | wouer | Aktivéiert oder deaktivéiert d'Sanéierung. Wann aktivéiert 'template' an 'title' Optiounen wäert sanitized. Kuckt de Sanitizer Sektioun an eiser JavaScript Dokumentatioun . |
wäiss Lëscht | Objet | Default Wäert | Objet deen erlaabt Attributer an Tags enthält |
sanitizeFn | null | Funktioun | null | Hei kënnt Dir Är eege Sanitärfunktioun ubidden. Dëst kann nëtzlech sinn wann Dir léiwer eng speziell Bibliothéik benotze fir Sanéierung ze maachen. |
popperConfig | null | Objet | null | Fir d'Standard Popper Configuratioun vum Bootstrap z'änneren, kuckt d' Popper Konfiguratioun |
Daten Attributer fir eenzel Tooltips
Optiounen fir eenzel Tooltips kënnen alternativ duerch d'Benotzung vun Datenattributer spezifizéiert ginn, wéi uewen erkläert.
Methoden
Asynchron Methoden an Iwwergäng
All API Methoden sinn asynchron a starten en Iwwergang . Si ginn zréck op den Uruffer soubal den Iwwergang ugefaang ass, awer ier en eriwwer ass . Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .
$().tooltip(options)
Befestegt e Tooltip-Handler op eng Elementsammlung.
.tooltip('show')
Entdeckt den Tooltip vun engem Element. Gitt zréck op den Uruffer ier den Tooltip tatsächlech gewisen gouf (dh ier d' shown.bs.tooltip
Evenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Tooltip ugesinn. Tooltips mat Null-Längt Titelen ginn ni ugewisen.
$('#element').tooltip('show')
.tooltip('hide')
Verstoppt den Tooltip vun engem Element. Gitt zréck op den Uruffer ier den Tooltip tatsächlech verstoppt gouf (dh ier d' hidden.bs.tooltip
Evenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Tooltip ugesinn.
$('#element').tooltip('hide')
.tooltip('toggle')
Wiesselt den Tooltip vun engem Element. Gitt zréck op den Uruffer ier den Tooltip tatsächlech gewisen oder verstoppt goufshown.bs.tooltip
( dh ier den hidden.bs.tooltip
Event geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Tooltip ugesinn.
$('#element').tooltip('toggle')
.tooltip('dispose')
Verstoppt an zerstéiert den Tooltip vun engem Element. Tooltipps déi Delegatioun benotzen (déi mat der selector
Optioun erstallt ginn ) kënnen net individuell op Descendant Trigger Elementer zerstéiert ginn.
$('#element').tooltip('dispose')
.tooltip('enable')
Gëtt dem Tooltip vun engem Element d'Méiglechkeet ze weisen. Tooltips sinn als Standard aktivéiert.
$('#element').tooltip('enable')
.tooltip('disable')
Entfernt d'Fäegkeet fir den Tooltip vun engem Element ze weisen. Den Tooltip kann nëmme gewise ginn wann et nei ageschalt ass.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Wiesselt d'Fäegkeet fir den Tooltip vun engem Element ze weisen oder ze verstoppen.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Aktualiséiert d'Positioun vum Tooltip vun engem Element.
$('#element').tooltip('update')
Evenementer
Event Typ | Beschreiwung |
---|---|
show.bs.Tooltip | Dëst Event brennt direkt wann d' show Instanzmethod genannt gëtt. |
gewisen.bs.Tooltip | Dëst Evenement gëtt ofgeléist wann den Tooltip fir de Benotzer siichtbar gemaach gouf (waart bis CSS Iwwergäng fäerdeg sinn). |
hide.bs.Tooltip | Dëst Evenement gëtt direkt gebrannt wann d' hide Instanzmethod genannt gouf. |
hidden.bs.Tooltip | Dëst Evenement gëtt ofgeléist wann den Tooltip fäerdeg ass vum Benotzer verstoppt ze ginn (waart op CSS Iwwergäng fir fäerdeg ze sinn). |
agebaut.bs.Tooltip | Dëst Evenement gëtt nom show.bs.tooltip Event ofgeschaaft wann d'Tooltip Schabloun un d'DOM bäigefüügt gouf. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})