in English

Værktøjstip

Dokumentation og eksempler på tilføjelse af brugerdefinerede Bootstrap-værktøjstip med CSS og JavaScript ved hjælp af CSS3 til animationer og dataattributter til lokal titellagring.

Oversigt

Ting at vide, når du bruger værktøjstip-plugin:

  • Værktøjstip er afhængige af 3. parts bibliotek Popper til positionering. Du skal inkludere popper.min.js før bootstrap.js eller bruge bootstrap.bundle.min.js/ bootstrap.bundle.jssom indeholder Popper for at værktøjstip skal virke!
  • Hvis du bygger vores JavaScript fra kilden, kræverutil.js det .
  • Værktøjstip er opt-in af ydeevnemæssige årsager, så du skal selv initialisere dem .
  • Værktøjstip med titler på nul længde vises aldrig.
  • Angiv container: 'body'for at undgå gengivelse af problemer i mere komplekse komponenter (såsom vores inputgrupper, knapgrupper osv.).
  • At udløse værktøjstip på skjulte elementer vil ikke fungere.
  • Værktøjstip til .disabledeller disabledelementer skal udløses på et indpakningselement.
  • Når de udløses fra hyperlinks, der spænder over flere linjer, vil værktøjstip blive centreret. Brug white-space: nowrap;på dine <a>s for at undgå denne adfærd.
  • Værktøjstip skal skjules, før deres tilsvarende elementer er blevet fjernet fra DOM.
  • Værktøjstip kan udløses takket være et element inde i en skygge-DOM.
Som standard bruger denne komponent den indbyggede indholdsrenser, som fjerner alle HTML-elementer, der ikke udtrykkeligt er tilladt. Se afsnittet om desinfektion i vores JavaScript-dokumentation for flere detaljer.
Animationseffekten af ​​denne komponent afhænger af prefers-reduced-motionmedieforespørgslen. Se afsnittet om reduceret bevægelse i vores tilgængelighedsdokumentation .

Har du alt det? Godt, lad os se, hvordan de fungerer med nogle eksempler.

Eksempel: Aktiver værktøjstip overalt

En måde at initialisere alle værktøjstip på en side på ville være at vælge dem efter deres data-toggleegenskab:

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

Eksempler

Hold markøren over nedenstående links for at se værktøjstip:

Pladsholdertekst for at demonstrere nogle inline-links med værktøjstip. Dette er nu bare fyldstof, ingen dræber. Indhold placeret her blot for at efterligne tilstedeværelsen af ​​ægte tekst . Og alt det bare for at give dig en idé om, hvordan værktøjstip ville se ud, når de bruges i virkelige situationer. Så forhåbentlig har du nu set, hvordan disse værktøjstip om links kan fungere i praksis, når du først har brugt dem på dit eget websted eller dit eget projekt.

Hold markøren over knapperne nedenfor for at se de fire værktøjstip-retninger: top, højre, bund 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 tilføjet:

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

Brug

Værktøjstip-pluginnet genererer indhold og opmærkning efter behov og placerer som standard værktøjstip efter deres udløserelement.

Udløs værktøjstippet via JavaScript:

$('#example').tooltip(options)
Overløb autoogscroll

Værktøjstip-position forsøger automatisk at ændre sig, når en overordnet container har overflow: autoeller overflow: scrollkan lide vores .table-responsive, men beholder stadig den oprindelige placerings placering. For at løse det skal du indstille boundaryindstillingen til noget andet end standardværdi, 'scrollParent', såsom 'window':

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

Markup

Den nødvendige markering for et værktøjstip er kun en dataattribut, og titlepå HTML-elementet ønsker du at have et værktøjstip. Den genererede markering af et værktøjstip er ret enkel, selvom den kræver en position (som standard indstillet til topaf plugin).

Få værktøjstip til at fungere for brugere af tastatur og hjælpemidler

Du bør kun tilføje værktøjstip til HTML-elementer, der traditionelt er tastaturfokuserbare og interaktive (såsom links eller formularkontrolelementer). Selvom vilkårlige HTML-elementer (såsom <span>s) kan gøres fokusbare ved at tilføje tabindex="0"attributten, vil dette tilføje potentielt irriterende og forvirrende tabulatorstop på ikke-interaktive elementer for tastaturbrugere, og de fleste hjælpeteknologier annoncerer i øjeblikket ikke værktøjstip i denne situation. Derudover skal du ikke stole udelukkende på hoversom udløser for dit værktøjstip, da dette vil gøre dine værktøjstip umulige at udløse for tastaturbrugere.

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

Deaktiverede elementer

Elementer med disabledattributten er ikke interaktive, hvilket betyder, at brugere ikke kan fokusere, svæve eller klikke på dem for at udløse et værktøjstip (eller popover). Som en løsning vil du gerne udløse værktøjstip fra en wrapper <div>eller <span>, ideelt gjort tastaturfokuserbar ved hjælp af tabindex="0", og tilsidesætte pointer-eventspå det deaktiverede element.

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

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-animation="".

Bemærk, at af sikkerhedsmæssige årsager kan indstillingerne sanitize, sanitizeFnog whiteListikke leveres ved hjælp af dataattributter.
Navn Type Standard Beskrivelse
animation boolesk rigtigt Anvend en CSS-fade-overgang til værktøjstip
beholder streng | element | falsk falsk

Føjer værktøjstip til et bestemt element. Eksempel: container: 'body'. Denne mulighed er især nyttig, fordi den giver dig mulighed for at placere værktøjstip i dokumentflowet nær det udløsende element - hvilket vil forhindre værktøjstip i at flyde væk fra det udløsende element under en vinduesstørrelsesændring.
forsinke nummer | objekt 0

Forsinket visning og skjulning af værktøjstip (ms) - gælder ikke for manuel triggertype

Hvis et nummer er angivet, anvendes forsinkelse på både skjul/show

Objektstrukturen er:delay: { "show": 500, "hide": 100 }
html boolesk falsk

Tillad HTML i værktøjstippet.

Hvis det er sandt, vil HTML-tags i værktøjstippet titleblive gengivet i værktøjstip. Hvis falsk, vil jQuerys textmetode blive brugt til at indsætte indhold i DOM.

Brug tekst, hvis du er bekymret for XSS-angreb.
placering streng | fungere 'top'

Sådan placeres værktøjstip - auto | top | nederst | venstre | ret.
Når autodet er angivet, vil det dynamisk omorientere værktøjstip.

Når en funktion bruges til at bestemme placeringen, kaldes den med værktøjstip DOM-knudepunktet som dets første argument og det udløsende element DOM-noden som dets andet. Konteksten thisindstilles til værktøjstip-forekomsten.
vælger streng | falsk falsk Hvis der er angivet en vælger, vil værktøjstip-objekter blive uddelegeret til de angivne mål. I praksis bruges dette til også at anvende værktøjstip til dynamisk tilføjede DOM-elementer ( jQuery.onunderstøttelse). Se dette og et informativt eksempel .
skabelon snor '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML til brug ved oprettelse af værktøjstip.

Værktøjstip titlevil blive injiceret i .tooltip-inner.

.arrowbliver pilen til værktøjstip.

Det yderste indpakningselement skal have .tooltipklassen og role="tooltip".
titel streng | element | fungere ''

Standard titelværdi, hvis titleattribut ikke er til stede.

Hvis en funktion er givet, vil den blive kaldt med dens thisreferencesæt til det element, som værktøjstippet er knyttet til.
udløser snor 'hover fokus'

Hvordan værktøjstip udløses - klik | svæv | fokus | brugervejledning. Du kan passere flere triggere; adskille dem med et mellemrum.

'manual'angiver, at værktøjstip vil blive udløst programmatisk via .tooltip('show'), .tooltip('hide')og .tooltip('toggle')metoderne; denne værdi kan ikke kombineres med nogen anden trigger.

'hover'i sig selv vil resultere i værktøjstip, der ikke kan udløses via tastaturet, og bør kun bruges, hvis alternative metoder til at formidle den samme information til tastaturbrugere er til stede.
offset nummer | streng | fungere 0

Forskydning af værktøjstip i forhold til dets mål.

Når en funktion bruges til at bestemme forskydningen, kaldes den med et objekt, der indeholder forskydningsdataene som dets første argument. Funktionen skal returnere et objekt med samme struktur. Det udløsende element DOM-node sendes som det andet argument.

For mere information henvises til Poppers offset-dokumenter .
fallbackPlacering streng | array 'flip' Tillad at angive, hvilken position Popper vil bruge ved fallback. For mere information henvises til Poppers adfærdsdokumentation
customClass streng | fungere ''

Tilføj klasser til værktøjstippet, når det vises. Bemærk, at disse klasser vil blive tilføjet ud over de klasser, der er angivet i skabelonen. For at tilføje flere klasser skal du adskille dem med mellemrum: 'a b'.

Du kan også sende en funktion, der skal returnere en enkelt streng, der indeholder yderligere klassenavne.
grænse streng | element 'scrollParent' Overløbsbegrænsningsgrænse for værktøjstip. Accepterer værdierne for 'viewport', 'window', 'scrollParent'eller en HTMLElement-reference (kun JavaScript). For mere information henvises til Poppers preventOverflow-dokumenter .
desinficere boolesk rigtigt Aktiver eller deaktiver desinficering. Hvis aktiveret, 'template'og 'title'muligheder vil blive renset. Se afsnittet om desinfektion i vores JavaScript-dokumentation .
hvidliste objekt Standard værdi Objekt som indeholder tilladte attributter og tags
sanitizeFn null | fungere nul Her kan du selv levere din desinficeringsfunktion. Dette kan være nyttigt, hvis du foretrækker at bruge et dedikeret bibliotek til at udføre desinficering.
popperConfig null | objekt nul For at ændre Bootstraps standard Popper -konfiguration, se Poppers konfiguration

Dataattributter for individuelle værktøjstip

Valgmuligheder for individuelle værktøjstip kan alternativt specificeres ved brug af dataattributter, som forklaret ovenfor.

Metoder

Asynkrone metoder og overgange

Alle API - metoder er asynkrone og starter en overgang . De vender tilbage til den, der ringer, så snart overgangen er startet, men før den slutter . Derudover vil et metodekald på en overgangskomponent blive ignoreret .

Se vores JavaScript-dokumentation for mere information .

$().tooltip(options)

Vedhæfter en værktøjstip-handler til en elementsamling.

.tooltip('show')

Viser et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip faktisk er blevet vist (dvs. før shown.bs.tooltiphændelsen indtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip. Værktøjstip med titler på nul længde vises aldrig.

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

.tooltip('hide')

Skjuler et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip rent faktisk er blevet skjult (dvs. før hidden.bs.tooltiphændelsen indtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip.

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

.tooltip('toggle')

Skifter et elements værktøjstip. Vender tilbage til den, der ringer, før værktøjstip faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.tooltipeller hidden.bs.tooltipindtræffer). Dette betragtes som en "manuel" udløsning af værktøjstip.

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

.tooltip('dispose')

Skjuler og ødelægger et elements værktøjstip. Værktøjstip, der bruger delegering (som oprettes ved hjælp af selectormuligheden ), kan ikke individuelt destrueres på efterkommer-triggerelementer.

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

.tooltip('enable')

Giver et elements værktøjstip mulighed for at blive vist. Værktøjstip er aktiveret som standard.

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

.tooltip('disable')

Fjerner muligheden for, at et elements værktøjstip vises. Værktøjstippet vil kun kunne vises, hvis det er genaktiveret.

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

.tooltip('toggleEnabled')

Skifter muligheden for, at et elements værktøjstip vises eller skjules.

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

.tooltip('update')

Opdaterer placeringen af ​​et elements værktøjstip.

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

Begivenheder

Begivenhedstype Beskrivelse
vis.bs.værktøjstip Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist.bs.værktøjstip Denne hændelse udløses, når værktøjstippet er gjort synligt for brugeren (vil vente på, at CSS-overgange er fuldført).
skjule.bs.værktøjstip Denne hændelse udløses straks, når hideinstansmetoden er blevet kaldt.
skjult.bs.værktøjstip Denne hændelse udløses, når værktøjstip er færdig med at blive skjult for brugeren (vil vente på, at CSS-overgange er fuldført).
indsat.bs.værktøjstip Denne hændelse udløses efter show.bs.tooltiphændelsen, når værktøjstip-skabelonen er blevet tilføjet til DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})