Knopinfo

Documentatie en voorbeelden voor het toevoegen van aangepaste Bootstrap-tooltips met CSS en JavaScript met CSS3 voor animaties en gegevensattributen voor lokale titelopslag.

Overzicht

Wat u moet weten bij het gebruik van de tooltip-plug-in:

Tooltips vertrouwen op de 3rd party bibliotheek Popper voor positionering. U moet popper.min.js vóór bootstrap.js opnemen of bootstrap.bundle.min.js/ gebruiken bootstrap.bundle.jsdie Popper bevat om tooltips te laten werken!
Als u ons JavaScript vanaf de bron bouwt, isutil.js .
Tooltips zijn opt-in om prestatieredenen, dus u moet ze zelf initialiseren .
Knopinfo met titels met een lengte van nul worden nooit weergegeven.
Specificeer container: 'body'om weergaveproblemen in complexere componenten te voorkomen (zoals onze invoergroepen, knopgroepen, enz.).
Het activeren van tooltips op verborgen elementen werkt niet.
Tooltips voor .disabledof disabledelementen moeten worden geactiveerd op een wrapper-element.
Wanneer geactiveerd door hyperlinks die meerdere regels overspannen, worden tooltips gecentreerd. Gebruik white-space: nowrap;op uw <a>s om dit gedrag te voorkomen.
Knopinfo moet worden verborgen voordat de bijbehorende elementen uit het DOM zijn verwijderd.
Tooltips kunnen worden geactiveerd dankzij een element in een schaduw-DOM.

Standaard gebruikt dit onderdeel de ingebouwde inhoudsanitizer, die HTML-elementen verwijdert die niet expliciet zijn toegestaan. Zie het gedeelte over ontsmettingsmiddel in onze JavaScript-documentatie voor meer informatie.

Het animatie-effect van deze component is afhankelijk van de prefers-reduced-motionmediaquery. Zie het gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .

Heb je dat allemaal? Geweldig, laten we eens kijken hoe ze werken met enkele voorbeelden.

Voorbeeld: Knopinfo overal inschakelen

Een manier om alle knopinfo op een pagina te initialiseren, is door ze op hun data-toggleattribuut te selecteren:

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

Voorbeelden

Plaats de muisaanwijzer op de onderstaande links om tooltips te zien:

Plaats de muisaanwijzer op de onderstaande knoppen om de vier tooltips-richtingen te zien: boven, rechts, onder en links.

<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 met aangepaste HTML toegevoegd:

<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>

Gebruik

De tooltip-plug-in genereert on-demand inhoud en markeringen en plaatst standaard tooltips na hun trigger-element.

Activeer de knopinfo via JavaScript:

$('#example').tooltip(options)

Overloop `auto`en`scroll`

De positie van de knopinfo probeert automatisch te veranderen wanneer een bovenliggende container onze heeft overflow: autoof overflow: scrollleuk vindt .table-responsive, maar behoudt nog steeds de positionering van de oorspronkelijke plaatsing. Om dit op te lossen, stelt u de boundaryoptie in op iets anders dan de standaardwaarde 'scrollParent', zoals 'window':

$('#example').tooltip({ boundary: 'window' })

Markup

De vereiste opmaak voor een tooltip is slechts een dataattribuut en titleop het HTML-element wil je een tooltip hebben. De gegenereerde opmaak van een tooltip is vrij eenvoudig, maar vereist wel een positie (standaard ingesteld topdoor de plug-in).

Knopinfo laten werken voor gebruikers van toetsenborden en ondersteunende technologie

Voeg alleen tooltips toe aan HTML-elementen die traditioneel gericht zijn op het toetsenbord en interactief zijn (zoals koppelingen of formulierbesturingselementen). Hoewel willekeurige HTML-elementen (zoals <span>s) focusseerbaar kunnen worden gemaakt door het tabindex="0"attribuut toe te voegen, zal dit voor toetsenbordgebruikers mogelijk vervelende en verwarrende tabstops toevoegen op niet-interactieve elementen, en de meeste ondersteunende technologieën geven momenteel geen tooltip aan in deze situatie. Vertrouw er bovendien niet alleen op hoverals de trigger voor uw tooltip, omdat dit ervoor zorgt dat uw tooltips niet kunnen worden geactiveerd voor toetsenbordgebruikers.

<!-- 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>

Uitgeschakelde elementen

Elementen met het disabledattribuut zijn niet interactief, wat betekent dat gebruikers niet kunnen focussen, de muisaanwijzer erop kunnen plaatsen of erop kunnen klikken om knopinfo (of popover) te activeren. Als tijdelijke oplossing wilt u de knopinfo activeren vanuit een wrapper <div>of <span>, idealiter gemaakt voor toetsenbordfocus met , en de op het uitgeschakelde element tabindex="0"overschrijven .pointer-events

<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>

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-animation="".

Houd er rekening mee dat om veiligheidsredenen de opties sanitize, sanitizeFnen whiteListniet kunnen worden geleverd met gegevensattributen.

Naam	Type	Standaard	Beschrijving
animatie	booleaans	WAAR	Pas een CSS-vervagingsovergang toe op de knopinfo
container	tekenreeks \| element \| vals	vals	Voegt de knopinfo toe aan een specifiek element. Voorbeeld: `container: 'body'`. Deze optie is met name handig omdat u de tooltip in de stroom van het document in de buurt van het activerende element kunt plaatsen - waardoor wordt voorkomen dat de tooltip van het triggerende element wegzweeft tijdens een venstergrootte.
vertraging	nummer \| object	0	Vertraging bij het tonen en verbergen van de knopinfo (ms) - is niet van toepassing op het handmatige triggertype Als een nummer wordt opgegeven, wordt vertraging toegepast op zowel verbergen/weergeven Objectstructuur is:`delay: { "show": 500, "hide": 100 }`
html	booleaans	vals	HTML toestaan in de knopinfo. Indien waar, worden HTML-tags in de tooltip `title`weergegeven in de tooltip. Indien onwaar, wordt de methode van jQuery `text`gebruikt om inhoud in de DOM in te voegen. Gebruik sms als je je zorgen maakt over XSS-aanvallen.
plaatsing	tekenreeks \| functie	'bovenkant'	Hoe de tooltip te positioneren - auto \| naar boven \| onderaan \| links \| Rechtsaf. Wanneer `auto`is opgegeven, wordt de tooltip dynamisch heroriënteerd. Wanneer een functie wordt gebruikt om de plaatsing te bepalen, wordt deze aangeroepen met de tooltip DOM-node als eerste argument en het triggerende element DOM-node als tweede. De `this`context is ingesteld op de tooltip-instantie.
selector	tekenreeks \| vals	vals	Als er een selector is, worden knopinfo-objecten gedelegeerd aan de opgegeven doelen. In de praktijk wordt dit gebruikt om ook tooltips toe te passen op dynamisch toegevoegde DOM-elementen ( `jQuery.on`ondersteuning). Zie dit en een informatief voorbeeld .
sjabloon	snaar	`'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'`	Basis-HTML om te gebruiken bij het maken van de knopinfo. De tooltip's `title`worden in de `.tooltip-inner`. `.arrow`wordt de pijl van de knopinfo. Het buitenste wrapper-element moet de `.tooltip`klasse en hebben `role="tooltip"`.
titel	tekenreeks \| element \| functie	''	Standaardtitelwaarde als `title`attribuut niet aanwezig is. Als een functie is opgegeven, wordt deze aangeroepen met de `this`referentieset naar het element waaraan de tooltip is gekoppeld.
trekker	snaar	'zwevende focus'	Hoe knopinfo wordt geactiveerd - klik op \| zweven \| focus \| handleiding. U kunt meerdere triggers doorgeven; scheid ze met een spatie. `'manual'`geeft aan dat de tooltip programmatisch wordt geactiveerd via de `.tooltip('show')`, `.tooltip('hide')`en `.tooltip('toggle')`methoden; deze waarde kan niet worden gecombineerd met een andere trigger. `'hover'`op zichzelf resulteert dit in tooltips die niet via het toetsenbord kunnen worden geactiveerd en mogen alleen worden gebruikt als er alternatieve methoden zijn om dezelfde informatie voor toetsenbordgebruikers over te brengen.
offset	nummer \| tekenreeks \| functie	0	Offset van de tooltip ten opzichte van het doel. Wanneer een functie wordt gebruikt om de offset te bepalen, wordt deze aangeroepen met een object dat de offsetgegevens als eerste argument bevat. De functie moet een object met dezelfde structuur teruggeven. Het triggerelement DOM-knooppunt wordt doorgegeven als het tweede argument. Raadpleeg voor meer informatie de offsetdocumenten van Popper .
fallbackPlaatsing	tekenreeks \| reeks	'omdraaien'	Sta toe om aan te geven welke positie Popper zal gebruiken bij fallback. Raadpleeg voor meer informatie de gedragsdocumenten van Popper
customClass	tekenreeks \| functie	''	Voeg klassen toe aan de knopinfo wanneer deze wordt weergegeven. Houd er rekening mee dat deze klassen worden toegevoegd naast de klassen die in de sjabloon zijn gespecificeerd. Om meerdere klassen toe te voegen, scheidt u ze met spaties: `'a b'`. U kunt ook een functie doorgeven die een enkele tekenreeks moet retourneren met extra klassenamen.
grens	tekenreeks \| element	'scrollOuder'	Overloopbeperkingsgrens van de tooltip. Accepteert de waarden van `'viewport'`, `'window'`, `'scrollParent'`of een HTMLElement-referentie (alleen JavaScript). Raadpleeg voor meer informatie Popper's preventOverflow-documenten .
ontsmetten	booleaans	WAAR	Schakel de desinfectie in of uit. Indien geactiveerd `'template'`en `'title'`opties zullen worden opgeschoond. Zie de sectie over ontsmettingsmiddelen in onze JavaScript-documentatie .
witte lijst	object	Standaardwaarde	Object dat toegestane attributen en tags bevat
ontsmettenFn	null \| functie	nul	Hier kunt u uw eigen ontsmettingsfunctie leveren. Dit kan handig zijn als u liever een speciale bibliotheek gebruikt om op te schonen.
popperConfig	null \| object	nul	Om de standaard Popper-configuratie van Bootstrap te wijzigen, zie Popper's configuratie

Gegevensattributen voor individuele knopinfo

Opties voor individuele tooltips kunnen ook worden gespecificeerd door het gebruik van data-attributen, zoals hierboven uitgelegd.

Methoden:

Asynchrone methoden en overgangen

Alle API-methoden zijn asynchroon en starten een transitie . Ze keren terug naar de beller zodra de overgang is gestart maar voordat deze eindigt . Bovendien wordt een methodeaanroep op een overgangscomponent genegeerd .

Zie onze JavaScript-documentatie voor meer informatie .

`$().tooltip(options)`

Koppelt een tooltip-handler aan een elementverzameling.

`.tooltip('show')`

Onthult de tooltip van een element. Keert terug naar de beller voordat de tooltip daadwerkelijk is getoond (dwz voordat de shown.bs.tooltipgebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip. Knopinfo met titels met een lengte van nul worden nooit weergegeven.

$('#element').tooltip('show')

`.tooltip('hide')`

Verbergt de knopinfo van een element. Keert terug naar de beller voordat de knopinfo daadwerkelijk is verborgen (dwz voordat de hidden.bs.tooltipgebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip.

$('#element').tooltip('hide')

`.tooltip('toggle')`

Schakelt de knopinfo van een element in. Keert terug naar de beller voordat de knopinfo daadwerkelijk is getoond of verborgen (dwz voordat de shown.bs.tooltipof hidden.bs.tooltip-gebeurtenis plaatsvindt). Dit wordt beschouwd als een "handmatige" activering van de tooltip.

$('#element').tooltip('toggle')

`.tooltip('dispose')`

Verbergt en vernietigt de tooltip van een element. Tooltips die delegatie gebruiken (die zijn gemaakt met de selectoroptie ) kunnen niet afzonderlijk worden vernietigd op onderliggende triggerelementen.

$('#element').tooltip('dispose')

`.tooltip('enable')`

Geeft de tooltip van een element de mogelijkheid om te worden weergegeven. Knopinfo is standaard ingeschakeld.

$('#element').tooltip('enable')

`.tooltip('disable')`

Verwijdert de mogelijkheid om de knopinfo van een element weer te geven. De knopinfo kan alleen worden weergegeven als deze opnieuw wordt ingeschakeld.

$('#element').tooltip('disable')

`.tooltip('toggleEnabled')`

Schakelt de mogelijkheid om de knopinfo van een element te tonen of te verbergen.

$('#element').tooltip('toggleEnabled')

`.tooltip('update')`

Werkt de positie van de knopinfo van een element bij.

$('#element').tooltip('update')

Evenementen

Evenementtype	Beschrijving
toon.bs.tooltip	Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de `show`instantiemethode wordt aangeroepen.
getoond.bs.tooltip	Deze gebeurtenis wordt geactiveerd wanneer de knopinfo zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid).
verberg.bs.tooltip	Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de `hide`instantiemethode is aangeroepen.
verborgen.bs.tooltip	Deze gebeurtenis wordt geactiveerd wanneer de knopinfo niet meer voor de gebruiker verborgen is (wacht tot de CSS-overgangen zijn voltooid).
ingevoegd.bs.tooltip	Deze gebeurtenis wordt geactiveerd na de `show.bs.tooltip`gebeurtenis wanneer de tooltip-sjabloon is toegevoegd aan de DOM.

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})