Verktøytips
Dokumentasjon og eksempler for å legge til egendefinerte Bootstrap-verktøytips med CSS og JavaScript ved å bruke CSS3 for animasjoner og dataattributter for lokal tittellagring.
Oversikt
Ting å vite når du bruker verktøytips-pluginen:
- Verktøytips er avhengige av tredjepartsbiblioteket Popper for posisjonering. Du må inkludere popper.min.js før bootstrap.js eller bruke
bootstrap.bundle.min.js
/bootstrap.bundle.js
som inneholder Popper for at verktøytips skal fungere! - Hvis du bygger JavaScript fra kilden, krever
util.js
det . - Verktøytips er opt-in av ytelsesårsaker, så du må initialisere dem selv .
- Verktøytips med null-lengde titler vises aldri.
- Spesifiser
container: 'body'
for å unngå å gjengi problemer i mer komplekse komponenter (som våre inndatagrupper, knappegrupper osv.). - Å utløse verktøytips på skjulte elementer vil ikke fungere.
- Verktøytips for
.disabled
ellerdisabled
elementer må utløses på et innpakningselement. - Når de utløses fra hyperkoblinger som spenner over flere linjer, vil verktøytips bli sentrert. Bruk
white-space: nowrap;
på din<a>
s for å unngå denne oppførselen. - Verktøytips må skjules før de tilhørende elementene er fjernet fra DOM.
- Verktøytips kan utløses takket være et element inne i en skygge-DOM.
prefers-reduced-motion
mediesøket. Se delen
for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .
Har du alt det? Flott, la oss se hvordan de fungerer med noen eksempler.
Eksempel: Aktiver verktøytips overalt
En måte å initialisere alle verktøytips på en side på er å velge dem etter deres data-toggle
attributt:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Eksempler
Hold markøren over koblingene nedenfor for å se verktøytips:
Plassholdertekst for å demonstrere noen innebygde lenker med verktøytips. Dette er nå bare filler, ingen morder. Innhold plassert her bare for å etterligne tilstedeværelsen av ekte tekst . Og alt det bare for å gi deg en idé om hvordan verktøytips vil se ut når de brukes i virkelige situasjoner. Så forhåpentligvis har du nå sett hvordan disse verktøytipsene om lenker kan fungere i praksis, når du først bruker dem på ditt eget nettsted eller prosjekt.
Hold markøren over knappene nedenfor for å se de fire verktøytipsretningene: topp, høyre, bunn og venstre.
<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>
Og med tilpasset HTML lagt til:
<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>
Bruk
Verktøytips-pluginen genererer innhold og markering på forespørsel, og plasserer som standard verktøytips etter utløserelementet.
Utløs verktøytipset via JavaScript:
$('#example').tooltip(options)
Overløp auto
ogscroll
Verktøytipsposisjon prøver å endres automatisk når en overordnet beholder har overflow: auto
eller overflow: scroll
liker vår .table-responsive
, men beholder fortsatt den opprinnelige plasseringens posisjon. For å løse det, sett boundary
alternativet til noe annet enn standardverdi, 'scrollParent'
, for eksempel 'window'
:
$('#example').tooltip({ boundary: 'window' })
Markup
Den nødvendige markeringen for et verktøytips er kun et data
attributt og title
på HTML-elementet ønsker du å ha et verktøytips. Den genererte markeringen av et verktøytips er ganske enkel, selv om den krever en posisjon (som standard satt til top
av plugin).
Få verktøytips til å fungere for brukere av tastatur og hjelpemidler
Du bør bare legge til verktøytips til HTML-elementer som tradisjonelt er tastaturfokuserbare og interaktive (som lenker eller skjemakontroller). Selv om vilkårlige HTML-elementer (som <span>
s) kan gjøres fokuserbare ved å legge til tabindex="0"
attributtet, vil dette legge til potensielt irriterende og forvirrende tabulatorstopp på ikke-interaktive elementer for tastaturbrukere, og de fleste hjelpeteknologier annonserer for øyeblikket ikke verktøytipset i denne situasjonen. I tillegg, ikke stol bare på hover
som utløser for verktøytipset ditt, da dette vil gjøre verktøytipsene umulige å utløse for tastaturbrukere.
<!-- 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>
Deaktiverte elementer
Elementer med disabled
attributtet er ikke interaktive, noe som betyr at brukere ikke kan fokusere, holde musepekeren eller klikke på dem for å utløse et verktøytips (eller popover). Som en løsning vil du trigge verktøytipset fra en wrapper <div>
eller <span>
, ideelt gjort tastaturfokuserbar ved å bruke tabindex="0"
, og overstyre pointer-events
på det deaktiverte elementet.
<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>
Alternativer
Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-
, som i data-animation=""
.
sanitize
,
sanitizeFn
og
whiteList
leveres ved bruk av dataattributter.
Navn | Type | Misligholde | Beskrivelse |
---|---|---|---|
animasjon | boolsk | ekte | Bruk en CSS-fade-overgang på verktøytipset |
container | streng | element | falsk | falsk | Legger til verktøytipset til et spesifikt element. Eksempel: |
forsinkelse | nummer | gjenstand | 0 | Forsinkelse med å vise og skjule verktøytipset (ms) - gjelder ikke for manuell utløsertype Hvis et nummer er oppgitt, brukes forsinkelse på både skjul/show Objektstrukturen er: |
html | boolsk | falsk | Tillat HTML i verktøytipset. Hvis sant, vil HTML-tagger i verktøytipset Bruk tekst hvis du er bekymret for XSS-angrep. |
plassering | streng | funksjon | 'topp' | Slik plasserer du verktøytipset - auto | topp | nederst | venstre | Ikke sant. Når en funksjon brukes til å bestemme plasseringen, kalles den med verktøytips DOM-noden som første argument og utløsende element DOM-noden som den andre. Konteksten |
velger | streng | falsk | falsk | Hvis en velger er angitt, vil verktøytipsobjekter bli delegert til de angitte målene. I praksis brukes dette til også å bruke verktøytips til dynamisk lagt til DOM-elementer ( jQuery.on støtte). Se dette og et informativt eksempel . |
mal | streng | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Baser HTML for å bruke når du lager verktøytipset. Verktøytipset
Det ytterste innpakningselementet skal ha |
tittel | streng | element | funksjon | '' | Standard tittelverdi hvis Hvis en funksjon er gitt, vil den kalles med |
avtrekker | streng | "hover fokus" | Hvordan verktøytips utløses - klikk | sveve | fokus | Håndbok. Du kan passere flere utløsere; skille dem med et mellomrom.
|
offset | nummer | streng | funksjon | 0 | Forskyvning av verktøytipset i forhold til målet. Når en funksjon brukes til å bestemme forskyvningen, kalles den opp med et objekt som inneholder forskyvningsdataene som det første argumentet. Funksjonen må returnere et objekt med samme struktur. Det utløsende elementet DOM-noden sendes som det andre argumentet. For mer informasjon se Poppers offset-dokumenter . |
fallbackPlassering | streng | array | "snu" | Tillat å spesifisere hvilken posisjon Popper vil bruke ved fallback. For mer informasjon, se Poppers atferdsdokumenter |
customClass | streng | funksjon | '' | Legg til klasser i verktøytipset når det vises. Merk at disse klassene vil bli lagt til i tillegg til eventuelle klasser spesifisert i malen. For å legge til flere klasser, skille dem med mellomrom: Du kan også sende en funksjon som skal returnere en enkelt streng som inneholder flere klassenavn. |
grense | streng | element | 'scrollParent' | Overløpsbegrensningsgrense for verktøytipset. Godtar verdiene til 'viewport' , 'window' , 'scrollParent' eller en HTMLElement-referanse (kun JavaScript). For mer informasjon, se Poppers preventOverflow-dokumenter . |
rense | boolsk | ekte | Aktiver eller deaktiver desinfisering. Hvis aktivert 'template' og 'title' alternativer vil bli renset. Se avsnittet om desinfisering i JavaScript-dokumentasjonen vår . |
hvitliste | gjenstand | Standardverdi | Objekt som inneholder tillatte attributter og tagger |
sanitizeFn | null | funksjon | null | Her kan du levere din egen desinfiseringsfunksjon. Dette kan være nyttig hvis du foretrekker å bruke et dedikert bibliotek for å utføre desinfisering. |
popperConfig | null | gjenstand | null | For å endre Bootstraps standard Popper -konfigurasjon, se Poppers konfigurasjon |
Dataattributter for individuelle verktøytips
Alternativer for individuelle verktøytips kan alternativt spesifiseres ved bruk av dataattributter, som forklart ovenfor.
Metoder
Asynkrone metoder og overganger
Alle API-metoder er asynkrone og starter en overgang . De går tilbake til den som ringer så snart overgangen er startet, men før den avsluttes . I tillegg vil et metodekall på en overgangskomponent bli ignorert .
$().tooltip(options)
Legger en verktøytipsbehandler til en elementsamling.
.tooltip('show')
Avslører et elements verktøytips. Går tilbake til den som ringer før verktøytipset faktisk har blitt vist (dvs. før shown.bs.tooltip
hendelsen inntreffer). Dette regnes som en "manuell" utløsning av verktøytipset. Verktøytips med null-lengde titler vises aldri.
$('#element').tooltip('show')
.tooltip('hide')
Skjuler et elements verktøytips. Går tilbake til den som ringer før verktøytipset faktisk har blitt skjult (dvs. før hidden.bs.tooltip
hendelsen inntreffer). Dette regnes som en "manuell" utløsning av verktøytipset.
$('#element').tooltip('hide')
.tooltip('toggle')
Veksler på verktøytipset til et element. Går tilbake til den som ringer før verktøytipset faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.tooltip
eller hidden.bs.tooltip
inntreffer). Dette regnes som en "manuell" utløsning av verktøytipset.
$('#element').tooltip('toggle')
.tooltip('dispose')
Skjuler og ødelegger et elements verktøytips. Verktøytips som bruker delegering (som opprettes ved å bruke selector
alternativet ) kan ikke ødelegges individuelt på etterkommere triggerelementer.
$('#element').tooltip('dispose')
.tooltip('enable')
Gir et elements verktøytips muligheten til å bli vist. Verktøytips er aktivert som standard.
$('#element').tooltip('enable')
.tooltip('disable')
Fjerner muligheten for å vise et elements verktøytips. Verktøytipset vil kun kunne vises hvis det er aktivert på nytt.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Veksler på muligheten for at et elements verktøytips skal vises eller skjules.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Oppdaterer posisjonen til et elements verktøytips.
$('#element').tooltip('update')
arrangementer
Hendelsestype | Beskrivelse |
---|---|
vis.bs.verktøytips | Denne hendelsen utløses umiddelbart når show instansmetoden kalles. |
vist.bs.verktøytips | Denne hendelsen utløses når verktøytipset er gjort synlig for brukeren (vil vente på at CSS-overganger er fullført). |
skjule.bs.verktøytips | Denne hendelsen utløses umiddelbart når hide instansmetoden er kalt. |
skjult.bs.verktøytips | Denne hendelsen utløses når verktøytipset er ferdig skjult for brukeren (vil vente på at CSS-overganger er fullført). |
satt inn.bs.verktøytips | Denne hendelsen utløses etter show.bs.tooltip hendelsen når verktøytipsmalen er lagt til DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})