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.js
som inneholder Popper for at popovers skal fungere! - Popovers krever verktøytips-plugin som en avhengighet.
- Hvis du bygger JavaScript fra kilden, krever
util.js
det . - Popovers er opt-in av ytelsesårsaker, så du må initialisere dem selv .
- Null-lengde
title
ogcontent
verdier 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
.disabled
ellerdisabled
elementer 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-nowrap
på 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.
prefers-reduced-motion
mediesø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-toggle
attributtet 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 container
slik 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="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
Avvis ved neste klikk
Bruk focus
triggeren 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 tabindex
attributt.
<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 disabled
attributtet 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-events
på 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)
GPU-akselerasjon
Popovers virker noen ganger uskarpe på Windows 10-enheter på grunn av GPU-akselerasjon og en modifisert system-DPI. Løsningen for dette i v4 er å deaktivere GPU-akselerasjon etter behov på popovers.
Foreslått løsning:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Å 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å hover
som 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 html
alternativet, 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-describedby
attributtet 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 i whiteList
eller tillatte attributter og koder), vær oppmerksom på at for øyeblikket ikke styrer tastaturfokusrekkefølgen. Når en tastaturbruker åpner en popover, forblir fokus på det utløsende elementet, og siden popover-en 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, bare å 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-
, som i data-animation=""
.
sanitize
,
sanitizeFn
og
whiteList
leveres 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: |
innhold | streng | element | funksjon | '' | Standardinnholdsverdi hvis Hvis en funksjon er gitt, vil den bli kalt med |
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: |
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 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 |
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 Popover-ene
Det ytterste omslagselementet skal ha |
tittel | streng | element | funksjon | '' | Standard tittelverdi hvis Hvis en funksjon er gitt, vil den bli kalt med |
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 Poppers offset-dokumenter . |
fallbackPlassering | streng | array | "snu" | Tillat å spesifisere hvilken posisjon Popper vil bruke ved fallback. For mer informasjon, se Poppers atferdsdokumenter |
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: Du kan også sende en funksjon som skal returnere en enkelt streng som inneholder flere klassenavn. |
grense | streng | element | 'scrollParent' | Overløpsbegrensningsgrense for popover. Godtar verdiene til 'viewport' , 'window' , 'scrollParent' eller en HTMLElement-referanse (kun JavaScript). For mer informasjon, se Poppers preventOverflow-dokumenter . |
rense | boolsk | ekte | Aktiver eller deaktiver desinfisering. Hvis aktivert 'template' , 'content' og 'title' alternativer vil bli renset. Se desinfeksjonsseksjonen i JavaScript-dokumentasjonen vår . |
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. |
popperConfig | null | gjenstand | null | For å endre Bootstraps standard Popper -konfigurasjon, se Poppers konfigurasjon |
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 .
$().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.popover
hendelsen inntreffer). Dette regnes som en "manuell" utløsning av popover. Popovers hvis tittel og innhold begge 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.popover
hendelsen 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.popover
eller hidden.bs.popover
inntreffer). 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 selector
alternativet ) 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...
})