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
/ gebruikenbootstrap.bundle.js
die Popper bevat om tooltips te laten werken! - Als u ons JavaScript vanaf de bron bouwt, is
util.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
.disabled
ofdisabled
elementen 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.
prefers-reduced-motion
mediaquery. 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-toggle
attribuut te selecteren:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Voorbeelden
Plaats de muisaanwijzer op de onderstaande links om tooltips te zien:
Tijdelijke tekst om enkele inline-links met tooltips te demonstreren. Dit is nu gewoon opvulling, geen moordenaar. Inhoud die hier is geplaatst om de aanwezigheid van echte tekst na te bootsen . En dat allemaal om u een idee te geven van hoe tooltips eruit zouden zien wanneer ze in echte situaties worden gebruikt. Dus hopelijk heb je nu gezien hoe deze tooltips over links in de praktijk kunnen werken, als je ze eenmaal op je eigen site of project gebruikt.
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
enscroll
De positie van de knopinfo probeert automatisch te veranderen wanneer een bovenliggende container onze heeft overflow: auto
of overflow: scroll
leuk vindt .table-responsive
, maar behoudt nog steeds de positionering van de oorspronkelijke plaatsing. Om dit op te lossen, stelt u de boundary
optie in op iets anders dan de standaardwaarde 'scrollParent'
, zoals 'window'
:
$('#example').tooltip({ boundary: 'window' })
Markup
De vereiste opmaak voor een tooltip is slechts een data
attribuut en title
op het HTML-element wil je een tooltip hebben. De gegenereerde opmaak van een tooltip is vrij eenvoudig, maar vereist wel een positie (standaard ingesteld top
door 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 hover
als 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 disabled
attribuut 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=""
.
sanitize
,
sanitizeFn
en
whiteList
niet 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: |
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: |
html | booleaans | vals | HTML toestaan in de knopinfo. Indien waar, worden HTML-tags in de tooltip 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 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 |
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
Het buitenste wrapper-element moet de |
titel | tekenreeks | element | functie | '' | Standaardtitelwaarde als Als een functie is opgegeven, wordt deze aangeroepen met de |
trekker | snaar | 'zwevende focus' | Hoe knopinfo wordt geactiveerd - klik op | zweven | focus | handleiding. U kunt meerdere triggers doorgeven; scheid ze met een spatie.
|
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: 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 .
$().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.tooltip
gebeurtenis 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.tooltip
gebeurtenis 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.tooltip
of 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 selector
optie ) 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...
})