Source

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 externe bibliotheek Popper.js voor positionering. U moet popper.min.js vóór bootstrap.js opnemen of bootstrap.bundle.min.js/ gebruiken bootstrap.bundle.jsdie Popper.js 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.

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:

Strakke broeken van het volgende niveau keffiyeh , je hebt er waarschijnlijk nog nooit van gehoord. Photo booth baard raw denim boekdruk veganistische messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duurzame quinoa 8-bit amerikaanse kleding heeft een terry richardson vinyl chambray. Baardstumptown, vesten banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, vier loko mcsweeney's cleanse veganistische chambray. Een echt ironische ambachtsman , ongeacht keytar , scenester farm-to-table banksy Austin twitter omgaan met freegan cred raw denim single-origin coffee viral.

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 autoenscroll

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 positie 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 titleweergegeven in de tooltip. Indien onwaar, wordt de methode van jQuery textgebruikt 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 autois 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 thiscontext 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.onondersteuning). 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 titleworden in de .tooltip-inner.

.arrowwordt de pijl van de knopinfo.

Het buitenste wrapper-element moet de .tooltipklasse en hebben role="tooltip".
titel tekenreeks | element | functie ''

Standaardtitelwaarde als titleattribuut niet aanwezig is.

Als een functie is opgegeven, wordt deze aangeroepen met de thisreferentieset 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 offset -documenten van Popper.js .
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.js
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 de preventOverflow- documenten van Popper.js .
ontsmetten booleaans WAAR Schakel de desinfectie in of uit. Indien geactiveerd 'template'en 'title'opties zullen worden opgeschoond.
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.js-configuratie van Bootstrap te wijzigen, zie de configuratie van Popper.js

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 van lengte 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 tooltip 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 showinstantiemethode 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 hideinstantiemethode 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.tooltipgebeurtenis wanneer de tooltip-sjabloon is toegevoegd aan de DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})