Source

Popovers

Dokumentation og eksempler på tilføjelse af Bootstrap popovers, som dem der findes i iOS, til ethvert element på dit websted.

Oversigt

Ting at vide, når du bruger popover-plugin:

  • Popovers 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 popovers kan fungere!
  • Popovers kræver værktøjstip-plugin som en afhængighed.
  • Hvis du bygger vores JavaScript fra kilden, kræverutil.js det .
  • Popovers er opt-in af præstationsmæssige årsager, så du skal selv initialisere dem .
  • Nul-længde titleog contentværdier vil aldrig vise en popover.
  • Angiv container: 'body'for at undgå gengivelse af problemer i mere komplekse komponenter (såsom vores inputgrupper, knapgrupper osv.).
  • At udløse popovers på skjulte elementer vil ikke fungere.
  • Popovers for .disabledeller disabledelementer skal udløses på et indpakningselement.
  • Når de udløses fra ankre, der ombrydes over flere linjer, vil popovers blive centreret mellem ankrenes samlede bredde. Brug white-space: nowrap;på dine <a>s for at undgå denne adfærd.
  • Popovers skal skjules, før deres tilsvarende elementer er blevet fjernet fra DOM.

Fortsæt med at læse for at se, hvordan popovers fungerer med nogle eksempler.

Eksempel: Aktiver popovers overalt

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

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

Eksempel: Brug af containermuligheden

Når du har nogle typografier på et overordnet element, der forstyrrer en popover, vil du gerne specificere en brugerdefineret container, så popoverens HTML vises i dette element i stedet.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Eksempel

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Fire retninger

Fire muligheder er tilgængelige: top-, højre-, bund- og venstrejusteret.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Afvis ved næste klik

Brug focustriggeren til at afvise popovers ved brugerens næste klik på et andet element end til/fra-elementet.

Specifik opmærkning påkrævet for at afvise-ved-næste-klik

For korrekt adfærd på tværs af browsere og på tværs af platforme skal du bruge <a>tagget, ikke<button> tagget, og du skal også inkludere en tabindexattribut.

Popover, der kan afvises 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

Deaktiverede elementer

Elementer med disabledattributten er ikke interaktive, hvilket betyder, at brugere ikke kan svæve eller klikke på dem for at udløse en popover (eller værktøjstip). Som en løsning vil du udløse popover fra en wrapper <div>eller <span>og tilsidesætte pointer-eventsdet deaktiverede element.

For deaktiverede popover-udløsere foretrækker du måske også data-trigger="hover", at popover-vinduet vises som øjeblikkelig visuel feedback til dine brugere, da de måske ikke forventer at klikke på et deaktiveret element.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Brug

Aktiver popovers via JavaScript:

$('#example').popover(options)

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 popoveren
beholder streng | element | falsk falsk

Føjer popover til et bestemt element. Eksempel: container: 'body'. Denne indstilling er især nyttig, fordi den giver dig mulighed for at placere popover i dokumentflowet nær det udløsende element - hvilket vil forhindre popover i at flyde væk fra det udløsende element under en vinduesstørrelse.
indhold streng | element | fungere ''

Standardindholdsværdi, hvis data-contentattribut ikke er til stede.

Hvis en funktion er givet, vil den blive kaldt med dens thisreference sat til det element, som popoveren er knyttet til.
forsinke nummer | objekt 0

Forsinket visning og skjulning af popover (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 Indsæt HTML i popoveren. 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 'ret'

Sådan placeres popover - auto | top | nederst | venstre | ret.
Når autodet er angivet, vil det dynamisk omorientere popoveren.

Når en funktion bruges til at bestemme placeringen, kaldes den med popover DOM-knuden som dets første argument og det udløsende element DOM-noden som dens anden. Konteksten thisindstilles til popover-forekomsten.
vælger streng | falsk falsk Hvis der er angivet en vælger, vil popover-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="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML til brug ved oprettelse af popover.

Popover'erne titlevil blive sprøjtet ind i .popover-header.

Popover'erne contentvil blive sprøjtet ind i .popover-body.

.arrowbliver popoverens pil.

Det yderste indpakningselement skal have .popoverklassen.
titel streng | element | fungere ''

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

Hvis en funktion er givet, vil den blive kaldt med dens thisreference sat til det element, som popoveren er knyttet til.
udløser snor 'klik' Hvordan popover udløses - klik | svæv | fokus | brugervejledning. Du kan passere flere triggere; adskille dem med et mellemrum. `manuel` kan ikke kombineres med nogen anden trigger.
offset nummer | snor 0 Forskydning af popover 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 popover. 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 popovers

Valgmuligheder for individuelle popovers 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.

$().popover(options)

Initialiserer popovers for en elementsamling.

.popover('show')

Afslører et elements popover. Vender tilbage til den, der ringer, før popover-vinduet rent faktisk er blevet vist (dvs. før shown.bs.popoverhændelsen indtræffer). Dette betragtes som en "manuel" udløsning af popover. Popovers, hvis både titel og indhold er nul-længde, vises aldrig.

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

.popover('hide')

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

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

.popover('toggle')

Skifter et elements popover. Vender tilbage til den, der ringer, før pop-over faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.popovereller hidden.bs.popoverindtræffer). Dette betragtes som en "manuel" udløsning af popover.

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

.popover('dispose')

Skjuler og ødelægger et elements popover. Popovers, der bruger delegering (som oprettes ved hjælp af selectormuligheden ), kan ikke individuelt destrueres på descendant trigger-elementer.

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

.popover('enable')

Giver et elements popover mulighed for at blive vist. Popovers er aktiveret som standard.

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

.popover('disable')

Fjerner muligheden for, at et elements popover vises. Popover vil kun kunne vises, hvis det er genaktiveret.

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

.popover('toggleEnabled')

Skifter muligheden for, at et elements popover vises eller skjules.

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

.popover('update')

Opdaterer placeringen af ​​et elements popover.

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

Begivenheder

Begivenhedstype Beskrivelse
show.bs.popover Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist.bs.popover Denne hændelse udløses, når popoveren er gjort synlig for brugeren (vil vente på, at CSS-overgange er fuldført).
hide.bs.popover Denne hændelse udløses straks, når hideinstansmetoden er blevet kaldt.
skjult.bs.popover Denne hændelse udløses, når popoveren er færdig med at blive skjult for brugeren (vil vente på, at CSS-overgange er fuldført).
indsat.bs.popover Denne hændelse udløses efter show.bs.popoverhændelsen, når popover-skabelonen er blevet tilføjet til DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})