Spring til hovedindhold Spring til dokumentnavigation
in English

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.jssom 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 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 .text-nowrappå 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.
Som standard bruger denne komponent den indbyggede indholdsrensning, som fjerner alle HTML-elementer, der ikke udtrykkeligt er tilladt. Se afsnittet om desinfektion i vores JavaScript-dokumentation for flere detaljer.
Animationseffekten af ​​denne komponent afhænger af prefers-reduced-motionmedieforespø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-toggleegenskab:

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

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.

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

<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 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 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å hoversom 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 htmlmuligheden, 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-describedbyattributten. 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 allowListtilladte 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".

sanitizeBemærk, at valgmulighederne , sanitizeFn, og af sikkerhedsmæssige årsager allowListikke 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: 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.

content streng | element | fungere ''

Standardindholdsværdi, hvis data-bs-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.

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:delay: { "show": 500, "hide": 100 }

html boolesk false Indsæt HTML i popoveren. Hvis falsk, innerTextvil 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 autodet er angivet, vil det dynamisk omorientere popover-vinduet.

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.

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 titlevil blive sprøjtet ind i .popover-header.

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

.popover-arrowbliver popoverens pil.

Det yderste indpakningselement skal have .popoverklassen.

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

trigger snor 'click' Hvordan popover udløses - klik | svæve | fokus | brugervejledning. Du kan passere flere triggere; adskille dem med et mellemrum. manualkan 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: 'class-1 class-2'.

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:data-bs-offset="10,20"

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: .[skidding, distance]

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 .

Se vores JavaScript-dokumentation for mere information .

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.popoverhæ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.popoverbegivenheden 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.popovereller hidden.bs.popoverindtræ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 selectormuligheden ), 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 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.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})