Hoppa till huvudinnehållet Hoppa till dokumentnavigering
in English

Popovers

Dokumentation och exempel för att lägga till Bootstrap popovers, som de som finns i iOS, till valfritt element på din webbplats.

Översikt

Saker att veta när du använder popover-plugin:

  • Popovers förlitar sig på tredje parts bibliotek Popper för positionering. Du måste inkludera popper.min.js före bootstrap.js eller använda bootstrap.bundle.min.js/ bootstrap.bundle.jssom innehåller Popper för att popovers ska fungera!
  • Popovers kräver verktygstipsplugin som ett beroende.
  • Popovers är opt-in av prestandaskäl, så du måste initiera dem själv .
  • Nolllängd titleoch contentvärden kommer aldrig att visa en popover.
  • Ange container: 'body'för att undvika att problem återges i mer komplexa komponenter (som våra indatagrupper, knappgrupper, etc).
  • Att utlösa popovers på dolda element kommer inte att fungera.
  • Popovers för .disabledeller disabledelement måste utlösas på ett omslagselement.
  • När de utlöses från ankare som lindas över flera linjer, kommer popovers att centreras mellan ankarnas totala bredd. Använd .text-nowrappå din <a>s för att undvika detta beteende.
  • Popovers måste döljas innan deras motsvarande element har tagits bort från DOM.
  • Popovers kan utlösas tack vare ett element inuti en skugga DOM.
Som standard använder den här komponenten den inbyggda innehållsrensaren, som tar bort alla HTML-element som inte är uttryckligen tillåtna. Se avsnittet desinficering i vår JavaScript-dokumentation för mer information.
Animeringseffekten av denna komponent beror på prefers-reduced-motionmediefrågan. Se avsnittet för reducerad rörelse i vår tillgänglighetsdokumentation .

Fortsätt läsa för att se hur popovers fungerar med några exempel.

Exempel: Aktivera popovers överallt

Ett sätt att initiera alla popovers på en sida är att välja dem efter deras data-bs-toggleattribut:

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

Exempel: Använda containeralternativet

När du har några stilar på ett överordnat element som stör en popover, vill du ange en anpassad containerså att popoverens HTML visas i det elementet istället.

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

Exempel

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

Fyra riktningar

Fyra alternativ är tillgängliga: topp-, höger-, botten- och vänsterjusterad. Vägbeskrivningarna speglas när du använder 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>

Stäng vid nästa klick

Använd focustriggern för att ta bort popovers vid nästa klick på ett annat element än växlingselementet.

Specifik uppmärkning krävs för att ta bort-vid-nästa-klick

För korrekt beteende över webbläsare och plattformar måste du använda <a>taggen, inte<button> taggen, och du måste även inkludera ett 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'
})

Inaktiverade element

Element med disabledattributet är inte interaktiva, vilket innebär att användare inte kan hålla muspekaren eller klicka på dem för att utlösa en popover (eller verktygstips). Som en lösning bör du trigga popover från ett omslag <div>eller <span>, idealiskt gjort tangentbordsfokuserbart med tabindex="0".

För inaktiverade popover-utlösare kanske du också föredrar data-bs-trigger="hover focus"att popover-fönstret visas som omedelbar visuell feedback till dina användare eftersom de kanske inte förväntar sig att klicka på ett inaktiverat 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);

Användande

Aktivera popovers via JavaScript:

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

Att få popovers att fungera för användare av tangentbord och hjälpmedel

För att tillåta tangentbordsanvändare att aktivera dina popovers bör du bara lägga till dem i HTML-element som traditionellt är tangentbordsfokuserade och interaktiva (som länkar eller formulärkontroller). Även om godtyckliga HTML-element (som <span>s) kan göras fokuserbara genom att lägga till tabindex="0"attributet, kommer detta att lägga till potentiellt irriterande och förvirrande tabbstopp på icke-interaktiva element för tangentbordsanvändare, och de flesta hjälpmedelstekniker meddelar för närvarande inte popoverens innehåll i denna situation . Dessutom, lita inte enbart på hoversom utlösare för dina popovers, eftersom detta kommer att göra dem omöjliga att utlösa för tangentbordsanvändare.

Även om du kan infoga rik, strukturerad HTML i popovers med htmlalternativet, rekommenderar vi starkt att du undviker att lägga till en överdriven mängd innehåll. Sättet som popovers fungerar för närvarande är att, när de väl visas, är deras innehåll kopplat till triggerelementet med aria-describedbyattributet. Som ett resultat kommer hela popover-innehållet att tillkännages för hjälpmedelsanvändare som en lång, oavbruten ström.

Dessutom, även om det är möjligt att även inkludera interaktiva kontroller (som formulärelement eller länkar) i din popover (genom att lägga till dessa element till de allowListtillåtna attributen och taggar), var medveten om att popover för närvarande inte hanterar tangentbordets fokusordning. När en tangentbordsanvändare öppnar en popover förblir fokus på det utlösande elementet, och eftersom popoveren vanligtvis inte omedelbart följer utlösaren i dokumentets struktur, finns det ingen garanti för att gå framåt/tryckaTABkommer att flytta en tangentbordsanvändare till själva popover-fönstret. Kort sagt, att helt enkelt lägga till interaktiva kontroller till en popover kommer sannolikt att göra dessa kontroller oåtkomliga/oanvändbara för tangentbordsanvändare och användare av hjälpmedel, eller åtminstone skapa en ologisk övergripande fokusordning. I dessa fall, överväg att använda en modal dialogruta istället.

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-bs-, som i data-bs-animation="". Se till att ändra fallets typ av alternativnamnet från camelCase till kebab-case när du skickar alternativen via dataattribut. Använd till exempel istället för att data-bs-customClass="beautifier"använda data-bs-custom-class="beautifier".

sanitizeObservera att alternativen , sanitizeFn, och av säkerhetsskäl allowListinte kan tillhandahållas med dataattribut.
namn Typ Standard Beskrivning
animation booleskt true Tillämpa en CSS-tonningsövergång på popover-fönstret
container sträng | element | falsk false

Lägger till popover till ett specifikt element. Exempel: container: 'body'. Det här alternativet är särskilt användbart eftersom det låter dig placera popover i dokumentflödet nära det utlösande elementet - vilket kommer att förhindra popover från att flyta bort från det utlösande elementet under en fönsterstorleksändring.

content sträng | element | fungera ''

Standardvärde för innehåll om data-bs-contentattributet inte finns.

Om en funktion ges kommer den att anropas med dess thisreferens inställd på elementet som popoveren är kopplad till.

delay nummer | objekt 0

Fördröjning av att visa och dölja popover (ms) - gäller inte manuell triggertyp

Om ett nummer tillhandahålls tillämpas fördröjning på både hide/show

Objektstrukturen är:delay: { "show": 500, "hide": 100 }

html booleskt false Infoga HTML i popover-fönstret. Om det är falskt kommer innerTextegenskapen att användas för att infoga innehåll i DOM. Använd text om du är orolig för XSS-attacker.
placement sträng | fungera 'right'

Så här placerar du popover - auto | topp | botten | vänster | höger.
När autodet anges kommer det dynamiskt att omorientera popover-fönstret.

När en funktion används för att bestämma placeringen anropas den med popover-DOM-noden som sitt första argument och det utlösande elementet DOM-noden som sin andra. Kontexten thisär inställd på popover-instansen.

selector sträng | falsk false Om en väljare tillhandahålls kommer popover-objekt att delegeras till de angivna målen. I praktiken används detta för att dynamiskt HTML-innehåll ska kunna läggas till popovers. Se detta och ett informativt exempel .
template sträng '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Basera HTML att använda när du skapar popover.

Popover titlekommer att injiceras i .popover-header.

Popover contentkommer att injiceras i .popover-body.

.popover-arrowkommer att bli popoverens pil.

Det yttersta omslagselementet ska ha .popoverklassen.

title sträng | element | fungera ''

Standardtitelvärde om titleattributet inte finns.

Om en funktion ges kommer den att anropas med dess thisreferens inställd på elementet som popoveren är kopplad till.

trigger sträng 'click' Hur popover utlöses - klicka | sväva | fokus | manuell. Du kan passera flera triggers; separera dem med ett mellanslag. manualkan inte kombineras med någon annan trigger.
fallbackPlacements array ['top', 'right', 'bottom', 'left'] Definiera reservplaceringar genom att tillhandahålla en lista över placeringar i array (i prioritetsordning). För mer information se Poppers beteendedokumentation
boundary sträng | element 'clippingParents' Overflow-begränsningsgräns för popover (gäller endast Poppers preventOverflow-modifierare). Som standard är det 'clippingParents'och kan acceptera en HTMLElement-referens (endast via JavaScript). För mer information se Poppers detectOverflow -dokument .
customClass sträng | fungera ''

Lägg till klasser i popover-fönstret när det visas. Observera att dessa klasser kommer att läggas till utöver de klasser som anges i mallen. För att lägga till flera klasser, separera dem med mellanslag: 'class-1 class-2'.

Du kan också skicka en funktion som ska returnera en enda sträng som innehåller ytterligare klassnamn.

sanitize booleskt true Aktivera eller inaktivera saneringen. Om aktiverat 'template', 'content'och 'title'alternativ kommer att saneras. Se avsnittet desinficering i vår JavaScript-dokumentation .
allowList objekt Standardvärde Objekt som innehåller tillåtna attribut och taggar
sanitizeFn null | fungera null Här kan du tillhandahålla din egen desinficeringsfunktion. Detta kan vara användbart om du föredrar att använda ett dedikerat bibliotek för att utföra sanering.
offset array | sträng | fungera [0, 8]

Förskjutning av popover i förhållande till dess mål. Du kan skicka en sträng i dataattribut med kommaseparerade värden som:data-bs-offset="10,20"

När en funktion används för att bestämma offset, anropas den med ett objekt som innehåller popperplaceringen, referensen och popper rects som dess första argument. Det utlösande elementets DOM-nod skickas som det andra argumentet. Funktionen måste returnera en matris med två siffror: .[skidding, distance]

För mer information se Poppers offset -dokument .

popperConfig null | objekt | fungera null

För att ändra Bootstraps standard Popper-konfiguration, se Poppers konfiguration .

När en funktion används för att skapa Popper-konfigurationen, anropas den med ett objekt som innehåller Bootstraps standard Popper-konfiguration. Det hjälper dig att använda och slå samman standarden med din egen konfiguration. Funktionen måste returnera ett konfigurationsobjekt för Popper.

Dataattribut för enskilda popovers

Alternativ för individuella popovers kan alternativt specificeras genom användning av dataattribut, som förklarats ovan.

Använder funktion medpopperConfig

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

Metoder

Asynkrona metoder och övergångar

Alla API - metoder är asynkrona och startar en övergång . De återvänder till den som ringer så snart övergången har påbörjats men innan den slutar . Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .

Se vår JavaScript-dokumentation för mer information .

show

Avslöjar ett elements popover. Återgår till den som ringer innan popover faktiskt har visats (dvs innan shown.bs.popoverhändelsen inträffar). Detta anses vara en "manuell" utlösning av popover. Popovers vars titel och innehåll båda är nolllängd visas aldrig.

myPopover.show()

Dölj

Döljer ett elements popover. Återgår till den som ringer innan popover faktiskt har dolts (dvs innan hidden.bs.popoverhändelsen inträffar). Detta anses vara en "manuell" utlösning av popover.

myPopover.hide()

växla

Växlar ett elements popover. Återgår till den som ringer innan popover faktiskt har visats eller dolt (dvs innan händelsen shown.bs.popovereller hidden.bs.popoverinträffar). Detta anses vara en "manuell" utlösning av popover.

myPopover.toggle()

kassera

Döljer och förstör ett elements popover (tar bort lagrad data på DOM-elementet). Popovers som använder delegering (som skapas med alternativet selector) kan inte förstöras individuellt på underliggande triggerelement.

myPopover.dispose()

Gör det möjligt

Ger ett elements popover möjligheten att visas. Popovers är aktiverade som standard.

myPopover.enable()

inaktivera

Tar bort möjligheten för ett elements popover att visas. Popover kommer bara att kunna visas om det återaktiveras.

myPopover.disable()

toggleEnabled

Växlar möjligheten för ett elements popover att visas eller döljas.

myPopover.toggleEnabled()

uppdatering

Uppdaterar positionen för ett elements popover.

myPopover.update()

getInstance

Statisk metod som låter dig få popover-instansen associerad med ett DOM-element

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

getOrCreateInstance

Statisk metod som låter dig få popover-instansen som är kopplad till ett DOM-element, eller skapa en ny om den inte initierades

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

evenemang

Event typ Beskrivning
show.bs.popover Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
visas.bs.popover Den här händelsen aktiveras när popoveren har gjorts synlig för användaren (väntar på att CSS-övergångar ska slutföras).
hide.bs.popover Denna händelse aktiveras omedelbart när hideinstansmetoden har anropats.
hidden.bs.popover Den här händelsen aktiveras när popover-fönstret har döljts för användaren (väntar på att CSS-övergångar ska slutföras).
insatt.bs.popover Denna händelse aktiveras efter show.bs.popoverhändelsen när popover-mallen har lagts till i DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})