Source

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.js 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.js för att popovers ska fungera!
  • Popovers kräver verktygstipsplugin som ett beroende.
  • Om du bygger vårt JavaScript från källan kräverutil.js det .
  • 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 white-space: nowrap;på din <a>s för att undvika detta beteende.
  • Popovers måste döljas innan deras motsvarande element har tagits bort från DOM.

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

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

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.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Exempel

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

Fyra riktningar

Fyra alternativ är tillgängliga: topp-, höger-, botten- och vänsterjusterad.

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

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.

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

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>åsidosätta pointer-eventsdet inaktiverade elementet.

För inaktiverade popover-utlösare kanske du också föredrar data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Användande

Aktivera popovers via JavaScript:

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-animation="".

namn Typ Standard Beskrivning
animation booleskt Sann Tillämpa en CSS-tonningsövergång på popover-fönstret
behållare sträng | element | falsk falsk

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.
innehåll sträng | element | fungera ''

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

Om en funktion ges kommer den att anropas med dess thisreferens inställd på elementet som popoveren är kopplad till.
dröjsmål 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 falsk Infoga HTML i popover-fönstret. Om det är falskt kommer jQuerys textmetod att användas för att infoga innehåll i DOM. Använd text om du är orolig för XSS-attacker.
placering sträng | fungera 'höger'

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.
väljare sträng | falsk falsk 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 .
mall sträng '<div class="popover" role="tooltip"><div class="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.

.arrowkommer att bli popoverens pil.

Det yttersta omslagselementet ska ha .popoverklassen.
titel 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.
utlösare sträng 'klick' Hur popover utlöses - klicka på | sväva | fokus | manuell. Du kan passera flera triggers; separera dem med ett mellanslag. "manuell" kan inte kombineras med någon annan trigger.
offset nummer | sträng 0 Förskjutning av popover i förhållande till dess mål. För mer information se Popper.js offset -dokument .
fallbackPlacering sträng | array 'flip' Tillåt att ange vilken position Popper kommer att använda vid reserv. För mer information se Popper.js beteendedokumentation
gräns sträng | element 'scrollParent' Överflödesbegränsningsgräns för popover. Accepterar värdena för 'viewport', 'window', 'scrollParent'eller en HTMLElement-referens (endast JavaScript). För mer information se Popper.js preventOverflow -dokument .

Dataattribut för enskilda popovers

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

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.

$().popover(options)

Initierar popovers för en elementsamling.

.popover('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 både titel och innehåll är noll-längd visas aldrig.

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

.popover('hide')

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.

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

.popover('toggle')

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.

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

.popover('dispose')

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

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

.popover('enable')

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

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

.popover('disable')

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

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

.popover('toggleEnabled')

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

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

.popover('update')

Uppdaterar positionen för ett elements popover.

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

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. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})