Popovers

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

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.

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

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

Använder funktion medpopperConfig

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

Metoder

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

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})