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 3. parts bibliotek Popper til positionering. Du skal inkludere popper.min.js før bootstrap.js eller bruge
bootstrap.bundle.min.js
/bootstrap.bundle.js
som indeholder Popper for at popovers kan virke! - Popovers kræver værktøjstip-plugin som en afhængighed.
- Popovers er opt-in af præstationsmæssige årsager, så du skal selv initialisere dem .
- Nul-længde
title
ogcontent
væ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
.disabled
ellerdisabled
elementer 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
.text-nowrap
på dine<a>
s for at undgå denne adfærd. - Popovers skal skjules, før deres tilsvarende elementer er blevet fjernet fra DOM.
- Popovers kan udløses takket være et element inde i en skygge-DOM.
prefers-reduced-motion
medieforespørgslen. Se afsnittet om
reduceret bevægelse i vores tilgængelighedsdokumentation .
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-bs-toggle
egenskab:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Eksempel: Brug af container
muligheden
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.
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 muligheder er tilgængelige: top-, højre-, bund- og venstrejusteret. Retninger spejles, når du bruger 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>
Afvis ved næste klik
Brug focus
triggeren 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 tabindex
attribut.
<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'
})
Deaktiverede elementer
Elementer med disabled
attributten 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 gerne udløse popover fra en indpakning <div>
eller <span>
ideelt lavet tastaturfokuserbar ved hjælp af tabindex="0"
.
For deaktiverede popover-udløsere foretrækker du måske også data-bs-trigger="hover focus"
, 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" 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);
Brug
Aktiver popovers via JavaScript:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
Få popovers til at fungere for brugere af tastatur og hjælpemidler
For at tillade tastaturbrugere at aktivere dine popovers, bør du kun tilføje dem 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, og de fleste hjælpeteknologier annoncerer i øjeblikket ikke popoverens indhold i denne situation . Derudover skal du ikke stole udelukkende på hover
som udløseren for dine popovers, da dette vil gøre dem umulige at udløse for tastaturbrugere.
Selvom du kan indsætte rig, struktureret HTML i popovers med html
muligheden, anbefaler vi kraftigt, at du undgår at tilføje en for stor mængde indhold. Måden popovers fungerer på i øjeblikket er, at når de først er vist, er deres indhold bundet til triggerelementet med aria-describedby
attributten. Som et resultat vil hele popoverens indhold blive annonceret til hjælpeteknologibrugere som én lang, uafbrudt stream.
Derudover, mens det er muligt også at inkludere interaktive kontroller (såsom formularelementer eller links) i din popover (ved at tilføje disse elementer til de allowList
tilladte attributter og tags), skal du være opmærksom på, at popover i øjeblikket ikke administrerer tastaturets fokusrækkefølge. Når en tastaturbruger åbner en popover, forbliver fokus på det udløsende element, og da popover normalt ikke umiddelbart følger triggeren i dokumentets struktur, er der ingen garanti for, at man bevæger sig fremad/trykkerTABvil flytte en tastaturbruger ind i selve popoveren. Kort sagt, blot tilføjelse af interaktive kontroller til en popover vil sandsynligvis gøre disse kontroller utilgængelige/ubrugelige for tastaturbrugere og brugere af hjælpeteknologier, eller i det mindste skabe en ulogisk overordnet fokusrækkefølge. I disse tilfælde kan du overveje at bruge en modal dialog i stedet.
Muligheder
Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-bs-
, som i data-bs-animation=""
. Sørg for at ændre sagstypen for indstillingsnavnet fra camelCase til kebab-case, når du videregiver mulighederne via dataattributter. Brug f.eks. i stedet for at data-bs-customClass="beautifier"
bruge data-bs-custom-class="beautifier"
.
sanitize
Bemærk, at valgmulighederne ,
sanitizeFn
, og
af sikkerhedsmæssige årsager
allowList
ikke kan leveres med dataattributter.
Navn | Type | Standard | Beskrivelse |
---|---|---|---|
animation |
boolesk | true |
Anvend en CSS-fade-overgang til popoveren |
container |
streng | element | falsk | false |
Føjer popover til et bestemt element. Eksempel: |
content |
streng | element | fungere | '' |
Standardindholdsværdi, hvis Hvis en funktion er givet, vil den blive kaldt med dens |
delay |
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: |
html |
boolesk | false |
Indsæt HTML i popoveren. Hvis falsk, innerText vil egenskaben blive brugt til at indsætte indhold i DOM. Brug tekst, hvis du er bekymret for XSS-angreb. |
placement |
streng | fungere | 'right' |
Sådan placeres popover - auto | top | nederst | venstre | ret. 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 |
selector |
streng | falsk | false |
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 . |
template |
snor | '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML til brug ved oprettelse af popover. Popover'erne Popover'erne
Det yderste indpakningselement skal have |
title |
streng | element | fungere | '' |
Standard titelværdi, hvis Hvis en funktion er givet, vil den blive kaldt med dens |
trigger |
snor | 'click' |
Hvordan popover udløses - klik | svæve | fokus | brugervejledning. Du kan passere flere triggere; adskille dem med et mellemrum. manual kan ikke kombineres med nogen anden trigger. |
fallbackPlacements |
array | ['top', 'right', 'bottom', 'left'] |
Definer reserveplaceringer ved at angive en liste over placeringer i matrix (i præferencerækkefølge). For mere information henvises til Poppers adfærdsdokumentation |
boundary |
streng | element | 'clippingParents' |
Overløbsbegrænsningsgrænse for popover (gælder kun Poppers preventOverflow-modifikator). Som standard er 'clippingParents' og kan det acceptere en HTMLElement-reference (kun via JavaScript). For mere information henvises til Poppers detectOverflow-dokumenter . |
customClass |
streng | fungere | '' |
Tilføj klasser til popover, når det vises. Bemærk, at disse klasser vil blive tilføjet ud over de klasser, der er angivet i skabelonen. For at tilføje flere klasser skal du adskille dem med mellemrum: Du kan også sende en funktion, der skal returnere en enkelt streng, der indeholder yderligere klassenavne. |
sanitize |
boolesk | true |
Aktiver eller deaktiver desinficering. Hvis aktiveret 'template' , 'content' og 'title' muligheder vil blive renset. Se afsnittet om desinfektion i vores JavaScript-dokumentation . |
allowList |
objekt | Standard værdi | Objekt som indeholder tilladte attributter og tags |
sanitizeFn |
null | fungere | null |
Her kan du selv levere din desinficeringsfunktion. Dette kan være nyttigt, hvis du foretrækker at bruge et dedikeret bibliotek til at udføre desinficering. |
offset |
række | streng | fungere | [0, 8] |
Forskydning af popover i forhold til dets mål. Du kan sende en streng i dataattributter med kommaseparerede værdier som: Når en funktion bruges til at bestemme forskydningen, kaldes den med et objekt, der indeholder popperplaceringen, referencen og popper rects som dets første argument. Det udløsende element DOM-node sendes som det andet argument. Funktionen skal returnere en matrix med to tal: . For mere information henvises til Poppers offset-dokumenter . |
popperConfig |
null | objekt | fungere | null |
For at ændre Bootstraps standard Popper -konfiguration, se Poppers konfiguration . Når en funktion bruges til at oprette Popper-konfigurationen, kaldes den med et objekt, der indeholder Bootstraps standard Popper-konfiguration. Det hjælper dig med at bruge og flette standarden med din egen konfiguration. Funktionen skal returnere et konfigurationsobjekt for Popper. |
Dataattributter for individuelle popovers
Valgmuligheder for individuelle popovers kan alternativt specificeres ved brug af dataattributter, som forklaret ovenfor.
Bruger funktion medpopperConfig
var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
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 .
at vise
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.popover
hændelsen indtræffer). Dette betragtes som en "manuel" udløsning af popover. Popovers, hvis titel og indhold begge er nul-længde, vises aldrig.
myPopover.show()
skjule
Skjuler et elements popover. Vender tilbage til den, der ringer, før pop-over faktisk er blevet skjult (dvs. før hidden.bs.popover
begivenheden indtræffer). Dette betragtes som en "manuel" udløsning af popover.
myPopover.hide()
skifte
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.popover
eller hidden.bs.popover
indtræffer). Dette betragtes som en "manuel" udløsning af popover.
myPopover.toggle()
bortskaffe
Skjuler og ødelægger et elements popover (fjerner lagrede data på DOM-elementet). Popovers, der bruger delegering (som oprettes ved hjælp af selector
muligheden ), kan ikke individuelt destrueres på descendent-triggerelementer.
myPopover.dispose()
aktivere
Giver et elements popover mulighed for at blive vist. Popovers er aktiveret som standard.
myPopover.enable()
deaktivere
Fjerner muligheden for, at et elements popover vises. Popover vil kun kunne vises, hvis det er genaktiveret.
myPopover.disable()
toggleAktiveret
Skifter muligheden for, at et elements popover vises eller skjules.
myPopover.toggleEnabled()
opdatering
Opdaterer placeringen af et elements popover.
myPopover.update()
getInstance
Statisk metode, som giver dig mulighed for at få popover-forekomsten tilknyttet et DOM-element
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
getOrCreateInstance
Statisk metode, som giver dig mulighed for at få popover-forekomsten tilknyttet et DOM-element eller oprette en ny, hvis den ikke blev initialiseret
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
Begivenheder
Begivenhedstype | Beskrivelse |
---|---|
show.bs.popover | Denne hændelse udløses med det samme, når show instansmetoden 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 hide instansmetoden 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.popover hændelsen, når popover-skabelonen er blevet tilføjet til DOM. |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})