Source

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.js for posisjonering. Du må inkludere popper.min.js før bootstrap.js eller bruke bootstrap.bundle.min.js/ bootstrap.bundle.jssom inneholder Popper.js for at verktøytips skal fungere!
  • Hvis du bygger JavaScript fra kilden, kreverutil.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 .disabledeller disabledelementer 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.

Animasjonseffekten til denne komponenten er avhengig av prefers-reduced-motionmediesø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-toggleattributt:

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

Eksempler

Hold markøren over koblingene nedenfor for å se verktøytips:

Trange bukser neste nivå keffiyeh du har sannsynligvis ikke hørt om dem. Fotoboks skjegg rå denim boktrykk vegansk messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie bærekraftig quinoa 8-bits amerikanske klær har en frotté richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fire loko mcsweeney's cleanse vegan chambray. En virkelig ironisk håndverker uansett keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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 autoogscroll

Verktøytipsposisjon prøver å endres automatisk når en overordnet beholder har overflow: autoeller overflow: scrollliker vår .table-responsive, men beholder fortsatt den opprinnelige plasseringens posisjon. For å løse det, sett boundaryalternativet til noe annet enn standardverdien, 'scrollParent', for eksempel 'window':

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

Markup

Den nødvendige markeringen for et verktøytips er kun et dataattributt og titlepå 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 topav 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. I tillegg kunngjør de fleste hjelpeteknologier foreløpig ikke verktøytipset i denne situasjonen.

I tillegg, ikke stol bare på hoversom 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 disabledattributtet 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-eventspå 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="".

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: container: 'body'. Dette alternativet er spesielt nyttig ved at det lar deg plassere verktøytipset i dokumentflyten i nærheten av det utløsende elementet - noe som vil forhindre at verktøytipset flyter bort fra det utløsende elementet under en vindusstørrelse.
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:delay: { "show": 500, "hide": 100 }
html boolsk falsk

Tillat HTML i verktøytipset.

Hvis sant, vil HTML-tagger i verktøytipset titlebli gjengitt i verktøytipset. Hvis falsk, vil jQuerys textmetode bli brukt til å sette inn innhold i DOM.

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 autodet er spesifisert, vil det dynamisk reorientere verktøytipset.

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 thiser satt til verktøytipsforekomsten.
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.onstø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 titlevil bli injisert i .tooltip-inner.

.arrowvil bli verktøytipsets pil.

Det ytterste innpakningselementet skal ha .tooltipklassen og role="tooltip".
tittel streng | element | funksjon ''

Standard tittelverdi hvis titleattributtet ikke er til stede.

Hvis en funksjon er gitt, vil den kalles med thisreferansen satt til elementet som verktøytipset er knyttet til.
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.

'manual'indikerer at verktøytipset vil bli utløst programmatisk via metodene .tooltip('show'), .tooltip('hide')og ; .tooltip('toggle')denne verdien kan ikke kombineres med noen annen utløser.

'hover'i seg selv vil resultere i verktøytips som ikke kan utløses via tastaturet, og bør kun brukes dersom alternative metoder for å formidle samme informasjon til tastaturbrukere finnes.
offset nummer | streng 0 Forskyvning av verktøytipset i forhold til målet. For mer informasjon, se Popper.js sine offset-dokumenter .
fallbackPlassering streng | array 'flipp' Tillat å spesifisere hvilken posisjon Popper vil bruke ved fallback. For mer informasjon se oppførselsdokumentene til Popper.js
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 Popper.js sine preventOverflow-dokumenter .

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 .

Se vår JavaScript-dokumentasjon for mer informasjon .

$().tooltip(options)

Legger en verktøytipsbehandler til en elementsamling.

.tooltip('show')

Viser et elements verktøytips. Går tilbake til den som ringer før verktøytipset faktisk har blitt vist (dvs. før shown.bs.tooltiphendelsen 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.tooltiphendelsen inntreffer). Dette regnes som en "manuell" utløsning av verktøytipset.

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

.tooltip('toggle')

Skifter 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.tooltipeller hidden.bs.tooltipinntreffer). 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 selectoralternativet ) 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 showinstansmetoden 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 hideinstansmetoden 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.tooltiphendelsen når verktøytipsmalen er lagt til DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})