Gå til hovedinnhold Hopp til dokumentnavigering
in English

Popovers

Dokumentasjon og eksempler for å legge til Bootstrap popovers, som de som finnes i iOS, til ethvert element på nettstedet ditt.

Oversikt

Ting å vite når du bruker popover-plugin:

  • Popovers 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.jssom inneholder Popper for at popovers skal fungere!
  • Popovers krever verktøytips-plugin som en avhengighet.
  • Popovers er opt-in av ytelsesårsaker, så du må initialisere dem selv .
  • Null-lengde titleog contentverdier vil aldri vise en popover.
  • Spesifiser container: 'body'for å unngå å gjengi problemer i mer komplekse komponenter (som våre inndatagrupper, knappegrupper osv.).
  • Å utløse popovers på skjulte elementer vil ikke fungere.
  • Popovers for .disabledeller disabledelementer må utløses på et wrapper-element.
  • Når de utløses fra ankere som går over flere linjer, vil popovers være sentrert mellom ankrenes totale bredde. Bruk .text-nowrappå din <a>s for å unngå denne oppførselen.
  • Popovers må skjules før de tilhørende elementene er fjernet fra DOM.
  • Popovers kan utløses takket være et element inne i en skygge-DOM.
Som standard bruker denne komponenten den innebygde innholdsrenseren, som fjerner alle HTML-elementer som ikke er eksplisitt tillatt. Se avsnittet om desinfisering i JavaScript-dokumentasjonen vår for mer informasjon.
Animasjonseffekten til denne komponenten er avhengig av prefers-reduced-motionmediesøket. Se delen for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .

Fortsett å lese for å se hvordan popovers fungerer med noen eksempler.

Eksempel: Aktiver popovers overalt

En måte å initialisere alle popovers på en side er å velge dem etter data-bs-toggleattributtet deres:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Eksempel: Bruk av containeralternativet

Når du har noen stiler på et overordnet element som forstyrrer en popover, vil du spesifisere en egendefinert containerslik at popoverens HTML vises i det elementet i stedet.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Eksempel

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

Fire retninger

Fire alternativer er tilgjengelige: topp-, høyre-, bunn- og venstrejustert. Retningene speiles når du bruker Bootstrap i RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Avvis ved neste klikk

Bruk focustriggeren til å avvise popovers ved brukerens neste klikk på et annet element enn veksleelementet.

Spesifikk markering kreves for avvisning ved neste klikk

For riktig oppførsel på tvers av nettlesere og plattformer må du bruke <a>taggen, ikke<button> taggen, og du må også inkludere et tabindexattributt.

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

Deaktiverte elementer

Elementer med disabledattributtet er ikke interaktive, noe som betyr at brukere ikke kan holde musepekeren eller klikke på dem for å utløse en popover (eller verktøytips). Som en løsning bør du utløse popover fra en innpakning <div>eller <span>, ideelt gjort tastaturfokuserbar ved hjelp av tabindex="0".

For deaktiverte popover-utløsere foretrekker du kanskje også data-bs-trigger="hover focus"at popover-en vises som umiddelbar visuell tilbakemelding til brukerne dine, da de kanskje ikke forventer å klikke på et deaktivert element.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Sass

Variabler

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Bruk

Aktiver popovers via JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Å få popovers til å fungere for brukere av tastatur og hjelpemidler

For å tillate tastaturbrukere å aktivere popover-vinduene dine, bør du bare legge dem 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 popoverens innhold i denne situasjonen . I tillegg må du ikke stole utelukkende på hoversom utløseren for popovers, da dette vil gjøre dem umulige å utløse for tastaturbrukere.

Selv om du kan sette inn rik, strukturert HTML i popovers med htmlalternativet, anbefaler vi sterkt at du unngår å legge til for mye innhold. Måten popovers fungerer på for øyeblikket er at innholdet deres er knyttet til triggerelementet med aria-describedbyattributtet når det først vises. Som et resultat vil hele popover-innholdet bli annonsert til brukere av hjelpemiddelteknologi som én lang, uavbrutt strøm.

I tillegg, mens det er mulig å inkludere interaktive kontroller (som skjemaelementer eller lenker) i popover-vinduet (ved å legge til disse elementene til de allowListtillatte attributtene og taggene), må du være oppmerksom på at popover-en for øyeblikket ikke administrerer tastaturfokusrekkefølgen. Når en tastaturbruker åpner en popover, forblir fokus på det utløsende elementet, og siden popover vanligvis ikke følger utløseren umiddelbart i dokumentets struktur, er det ingen garanti for at man går fremover/trykkerTABvil flytte en tastaturbruker inn i selve popover-vinduet. Kort sagt, å legge til interaktive kontroller i en popover vil sannsynligvis gjøre disse kontrollene uoppnåelige/ubrukelige for tastaturbrukere og brukere av hjelpeteknologier, eller i det minste gi en ulogisk generell fokusrekkefølge. I disse tilfellene bør du vurdere å bruke en modal dialog i stedet.

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-bs-, som i data-bs-animation="". Sørg for å endre sakstype for alternativnavnet fra camelCase til kebab-case når du sender alternativene via dataattributter. Bruk for eksempel i stedet for å data-bs-customClass="beautifier"bruke data-bs-custom-class="beautifier".

sanitizeMerk at alternativene , sanitizeFn, og av sikkerhetsgrunner allowListikke kan leveres med dataattributter.
Navn Type Misligholde Beskrivelse
animation boolsk true Bruk en CSS-fade-overgang på popoveren
container streng | element | falsk false

Legger popover til et bestemt element. Eksempel: container: 'body'. Dette alternativet er spesielt nyttig ved at det lar deg plassere popover i flyten av dokumentet nær det utløsende elementet - noe som vil forhindre popover fra å flyte bort fra det utløsende elementet under en vindusstørrelse.

content streng | element | funksjon ''

Standardinnholdsverdi hvis data-bs-contentattributtet ikke er til stede.

Hvis en funksjon er gitt, vil den bli kalt med thisreferansen satt til elementet som popoveren er knyttet til.

delay nummer | gjenstand 0

Forsinkelse av å vise og skjule popover (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 false Sett inn HTML i popover-vinduet. Hvis falsk, innerTextvil egenskapen bli brukt til å sette inn innhold i DOM. Bruk tekst hvis du er bekymret for XSS-angrep.
placement streng | funksjon 'right'

Slik plasserer du popover - auto | topp | nederst | venstre | Ikke sant.
Når autodet er spesifisert, vil det dynamisk reorientere popover-vinduet.

Når en funksjon brukes til å bestemme plasseringen, kalles den med popover-DOM-noden som det første argumentet og det utløsende elementet DOM-noden som den andre. Konteksten thiser satt til popover-forekomsten.

selector streng | falsk false Hvis en velger er angitt, vil popover-objekter bli delegert til de angitte målene. I praksis brukes dette for å gjøre det mulig for dynamisk HTML-innhold å legge til popovers. Se dette og et informativt eksempel .
template streng '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML for å bruke når du oppretter popover.

Popover-ene titlevil bli injisert i .popover-header.

Popover-ene contentvil bli injisert i .popover-body.

.popover-arrowvil bli popover-pilen.

Det ytterste omslagselementet skal ha .popoverklassen.

title streng | element | funksjon ''

Standard tittelverdi hvis titleattributtet ikke er til stede.

Hvis en funksjon er gitt, vil den bli kalt med thisreferansen satt til elementet som popoveren er knyttet til.

trigger streng 'click' Hvordan popover utløses - klikk | sveve | fokus | Håndbok. Du kan passere flere utløsere; skille dem med et mellomrom. manualkan ikke kombineres med noen annen trigger.
fallbackPlacements array ['top', 'right', 'bottom', 'left'] Definer reserveplasseringer ved å gi en liste over plasseringer i matrise (i preferanserekkefølge). For mer informasjon, se Poppers atferdsdokumenter
boundary streng | element 'clippingParents' Overløpsbegrensningsgrense for popover (gjelder bare Poppers preventOverflow-modifikator). Som standard er det 'clippingParents'og kan godta en HTMLElement-referanse (kun via JavaScript). For mer informasjon se Poppers detectOverflow-dokumenter .
customClass streng | funksjon ''

Legg til klasser i popover-vinduet 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: 'class-1 class-2'.

Du kan også sende en funksjon som skal returnere en enkelt streng som inneholder flere klassenavn.

sanitize boolsk true Aktiver eller deaktiver desinfisering. Hvis aktivert 'template', 'content'og 'title'alternativer vil bli renset. Se avsnittet om desinfisering i JavaScript-dokumentasjonen vår .
allowList 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.
offset rekke | streng | funksjon [0, 8]

Forskyvning av popover i forhold til målet. Du kan sende en streng i dataattributter med kommadelte verdier som:data-bs-offset="10,20"

Når en funksjon brukes til å bestemme forskyvningen, kalles den opp med et objekt som inneholder popperplasseringen, referansen og popperrektene som det første argumentet. Det utløsende elementet DOM-noden sendes som det andre argumentet. Funksjonen må returnere en matrise med to tall: .[skidding, distance]

For mer informasjon se Poppers offset-dokumenter .

popperConfig null | objekt | funksjon null

For å endre Bootstraps standard Popper -konfigurasjon, se Poppers konfigurasjon .

Når en funksjon brukes til å lage Popper-konfigurasjonen, kalles den med et objekt som inneholder Bootstraps standard Popper-konfigurasjon. Det hjelper deg å bruke og slå sammen standarden med din egen konfigurasjon. Funksjonen må returnere et konfigurasjonsobjekt for Popper.

Dataattributter for individuelle popovers

Alternativer for individuelle popovers kan alternativt spesifiseres ved bruk av dataattributter, som forklart ovenfor.

Bruker funksjon medpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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 .

forestilling

Avslører et elements popover. Går tilbake til den som ringer før popover faktisk har blitt vist (dvs. før shown.bs.popoverhendelsen inntreffer). Dette regnes som en "manuell" utløsning av popover. Popovers hvis tittel og innhold begge har null lengde, vises aldri.

myPopover.show()

gjemme seg

Skjuler et elements popover. Går tilbake til den som ringer før popover faktisk har blitt skjult (dvs. før hidden.bs.popoverhendelsen inntreffer). Dette regnes som en "manuell" utløsning av popover.

myPopover.hide()

veksle

Veksler på et elements popover. Går tilbake til den som ringer før popover-en faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.popovereller hidden.bs.popoverinntreffer). Dette regnes som en "manuell" utløsning av popover.

myPopover.toggle()

kaste

Skjuler og ødelegger et elements popover (fjerner lagrede data på DOM-elementet). Popovers som bruker delegering (som opprettes ved hjelp av selectoralternativet ) kan ikke ødelegges individuelt på etterkommere triggerelementer.

myPopover.dispose()

muliggjøre

Gir et elements popover muligheten til å bli vist. Popovers er aktivert som standard.

myPopover.enable()

deaktiver

Fjerner muligheten for at et elements popover skal vises. Popover vil kun kunne vises hvis den er aktivert på nytt.

myPopover.disable()

toggleEnabled

Veksler på muligheten for at et elements popover skal vises eller skjules.

myPopover.toggleEnabled()

Oppdater

Oppdaterer posisjonen til et elements popover.

myPopover.update()

getInstance

Statisk metode som lar deg få popover-forekomsten knyttet til et DOM-element

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Statisk metode som lar deg få popover-forekomsten knyttet til et DOM-element, eller opprette en ny i tilfelle den ikke ble initialisert

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

arrangementer

Hendelsestype Beskrivelse
show.bs.popover Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
vist.bs.popover Denne hendelsen utløses når popoveren er gjort synlig for brukeren (vil vente på at CSS-overgangene er fullført).
hide.bs.popover Denne hendelsen utløses umiddelbart når hideinstansmetoden er kalt.
skjult.bs.popover Denne hendelsen utløses når popover-en er ferdig skjult for brukeren (vil vente på at CSS-overganger er fullført).
innsatt.bs.popover Denne hendelsen utløses etter show.bs.popoverhendelsen når popover-malen er lagt til DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})