Source

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 tredjepartsbiblioteket Popper.js til positionering. Du skal inkludere popper.min.js før bootstrap.js eller bruge bootstrap.bundle.min.js/ bootstrap.bundle.jssom indeholder Popper.js 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.

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

Stramme bukser næste niveau keffiyeh du har sikkert ikke hørt om dem. Photo booth skæg rå denim bogtryk vegansk messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie bæredygtige quinoa 8-bit amerikansk beklædning har en frotté richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fire loko mcsweeney's cleanse veganske chambray. En virkelig ironisk håndværker uanset keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kaffe viral.

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. Derudover annoncerer de fleste hjælpeteknologier 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øjstippet 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="".

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 at gøre det muligt for dynamisk HTML-indhold at tilføje popovers. 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 | snor 0 Forskydning af værktøjstip i forhold til dets mål. For mere information henvises til Popper.js's offset-dokumenter .
fallbackPlacering streng | array 'flip' Tillad at angive, hvilken position Popper vil bruge ved fallback. For mere information henvises til Popper.js' adfærdsdokumenter
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 Popper.js's preventOverflow-dokumenter .

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…
})