Source

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.js fir positionéieren. Dir musst Popper.min.js virum bootstrap.js enthalen oder benotzen bootstrap.bundle.min.js/ bootstrap.bundle.jsdéi Popper.js enthält fir datt Tooltips funktionnéieren!
  • Wann Dir eis JavaScript aus der Quell baut, brauchutil.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 .disabledoder disabledElementer 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.

Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro 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-toggleAttribut ze wielen:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Beispiller

Hover iwwer d'Links hei drënner fir Tooltipps ze gesinn:

Knapp Hosen nächste Level keffiyeh Dir hutt wahrscheinlech net vun hinnen héieren. Photo Stand Baart Raw Denim Letterpress Vegan Messenger Bag Stumptown. Farm-to-Table Seitan, Mcsweeney's Fixie nohalteg Quinoa 8-Bit amerikanesch Kleedung hunn e Terry Richardson Vinyl Chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu Biodiesel Williamsburg Marfa, véier Loko Mcsweeney's botzen vegan Chambray. Eng wierklech ironesch Handwierker egal Keytar , scenester Bauerenhaff-ze-Dësch banksy Austin Twitter Handle freegan cred rau Denim Single-Origine Kaffi viral.

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 autoanscroll

Tooltip Positioun probéiert automatesch z'änneren wann en Elterendeel Container huet overflow: autooder overflow: scrollwéi eis .table-responsive, awer hält ëmmer d'originell Plazéierungspositioun. Fir ze léisen, setzt d' boundaryOptioun 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 dataAttribut an titleam 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, topvum 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 Tastatur Benotzer addéieren, an déi meescht Assistenztechnologien annoncéieren de Moment net den Tooltip an dëser Situatioun. Zousätzlech, vertrau net eleng op hoverden 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 disabledAttribut 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-eventsop 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="".

Bedenkt datt aus Sécherheetsgrënn d' sanitize, sanitizeFnan d' whiteListOptioune 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 container: 'body':. Dës Optioun ass besonnesch nëtzlech well et Iech erlaabt den Tooltip am Flux vum Dokument no beim Ausléiserelement ze positionéieren - wat verhënnert datt den Tooltip vum Ausléiserelement wärend enger Fënstergréisst schwëmmt.
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:delay: { "show": 500, "hide": 100 }
html boolesch falsch

Erlaabt HTML am Tooltip.

Wann et richteg ass, ginn HTML-Tags an den Tooltip am Tooltip titlerendered. Wann falsch, gëtt d'JQuery textMethod benotzt fir Inhalt an d'DOM ze setzen.

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 autospezifizéiert ass, wäert et den Tooltip dynamesch nei orientéieren.

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 thisKontext gëtt op d'Tooltip Instanz gesat.
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 titlegëtt an de .tooltip-inner.

.arrowwäert de Pfeil vum Tooltip ginn.

Dat äusserst Wrapperelement soll d' .tooltipKlass an role="tooltip".
Titel streng | Element | Funktioun ''

Standard Titelwäert wann titleAttribut net präsent ass.

Wann eng Funktioun uginn ass, gëtt se mat senger thisReferenz op d'Element genannt, op deem den Tooltip befestegt ass.
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.

'manual'weist datt den Tooltip programmatesch iwwer d' .tooltip('show'), .tooltip('hide')a .tooltip('toggle')Methoden ausgeléist gëtt; dëse Wäert kann net mat all aner Ausléiser kombinéiert ginn.

'hover'eleng wäert zu Tooltipps resultéieren, déi net iwwer d'Tastatur ausgeléist kënne ginn, a sollten nëmme benotzt ginn wann alternativ Methoden fir d'selwecht Informatioun fir Tastatur Benotzer präsent sinn.
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 Informatiounen, kuckt op Popper.js's Offset Docs .
fallbackPlacement streng | Array 'flippen' Erlaabt ze spezifizéieren wéi eng Positioun Popper op Fallback benotzt. Fir méi Informatioun kuckt op Popper.js Verhalensdokumenter
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.js's preventOverflow Docs .
sanitize boolesch wouer Aktivéiert oder deaktivéiert d'Sanéierung. Wann aktivéiert 'template'an 'title'Optiounen wäert sanitized.
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 Bootstrap's Standard Popper.js Config z'änneren, kuckt d' Popper.js 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 .

Kuckt eis JavaScript Dokumentatioun fir méi Informatioun .

$().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.tooltipEvenement 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.tooltipEvenement 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.tooltipEvent 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 selectorOptioun 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' showInstanzmethod 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' hideInstanzmethod 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.tooltipEvent ofgeschaaft wann d'Tooltip Schabloun un d'DOM bäigefüügt gouf. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})