Source

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.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 popovers skal fungere!
Popovers krever verktøytips-plugin som en avhengighet.
Hvis du bygger JavaScript fra kilden, kreverutil.js det .
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.

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

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

Eksempel: Bruk av `container`alternativet

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.

$(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 alternativer er tilgjengelige: topp-, høyre-, bunn- og venstrejustert.

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

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.

Avvisbar popover

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

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 vil du utløse popover fra en wrapper <div>eller <span>og overstyre pointer-eventspå det deaktiverte elementet.

For deaktiverte popover-utløsere foretrekker du kanskje også data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Bruk

Aktiver popovers via JavaScript:

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-animation="".

Merk at av sikkerhetsgrunner kan ikke alternativene sanitize, sanitizeFnog whiteListleveres ved bruk av dataattributter.

Navn	Type	Misligholde	Beskrivelse
animasjon	boolsk	ekte	Bruk en CSS-fade-overgang på popoveren
container	streng \| element \| falsk	falsk	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.
innhold	streng \| element \| funksjon	''	Standardinnholdsverdi hvis `data-content`attributtet ikke er til stede. Hvis en funksjon er gitt, vil den bli kalt med `this`referansen satt til elementet som popoveren er knyttet til.
forsinkelse	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	falsk	Sett inn HTML i popover-vinduet. Hvis falsk, vil jQuerys `text`metode bli brukt til å sette inn innhold i DOM. Bruk tekst hvis du er bekymret for XSS-angrep.
plassering	streng \| funksjon	'Ikke sant'	Slik plasserer du popover - auto \| topp \| nederst \| venstre \| Ikke sant. Når `auto`det 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 `this`er satt til popover-forekomsten.
velger	streng \| falsk	falsk	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 .
mal	streng	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	Base HTML for å bruke når du oppretter popover. Popover-ene `title`vil bli injisert i `.popover-header`. Popover-ene `content`vil bli injisert i `.popover-body`. `.arrow`vil bli popover-pilen. Det ytterste omslagselementet skal ha `.popover`klassen.
tittel	streng \| element \| funksjon	''	Standard tittelverdi hvis `title`attributtet ikke er til stede. Hvis en funksjon er gitt, vil den bli kalt med `this`referansen satt til elementet som popoveren er knyttet til.
avtrekker	streng	'klikk'	Hvordan popover utløses - klikk \| sveve \| fokus \| Håndbok. Du kan passere flere utløsere; skille dem med et mellomrom. `manual`kan ikke kombineres med noen annen trigger.
offset	nummer \| streng	0	Forskyvning av popover 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 popover. Godtar verdiene til `'viewport'`, `'window'`, `'scrollParent'`eller en HTMLElement-referanse (kun JavaScript). For mer informasjon, se Popper.js sine preventOverflow-dokumenter .
rense	boolsk	ekte	Aktiver eller deaktiver desinfisering. Hvis aktivert `'template'`, `'content'`og `'title'`alternativer vil bli renset.
hvitliste	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.

Dataattributter for individuelle popovers

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

`$().popover(options)`

Initialiserer popovers for en elementsamling.

`.popover('show')`

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 både tittel og innhold har null lengde, vises aldri.

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

`.popover('hide')`

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.

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

`.popover('toggle')`

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.

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

`.popover('dispose')`

Skjuler og ødelegger et elements popover. Popovers som bruker delegering (som opprettes ved å bruke selectoralternativet ) kan ikke ødelegges individuelt på etterkommere triggerelementer.

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

`.popover('enable')`

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

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

`.popover('disable')`

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

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

`.popover('toggleEnabled')`

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

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

`.popover('update')`

Oppdaterer posisjonen til et elements popover.

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

arrangementer

Hendelsestype	Beskrivelse
show.bs.popover	Denne hendelsen utløses umiddelbart når `show`instansmetoden 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 `hide`instansmetoden 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.popover`hendelsen når popover-malen er lagt til DOM.

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})