Popovers

Oversikt

Ting å vite når du bruker popover-plugin:

• Popovers er avhengige av tredjepartsbiblioteket Popper for posisjonering. Du må inkludere popper.min.js før bootstrap.js eller bruke bootstrap.bundle.min.js/ bootstrap.bundle.jssom inneholder Popper for at popovers skal fungere!
• Popovers krever verktøytips-plugin som en avhengighet.
• Popovers er opt-in av ytelsesårsaker, så du må initialisere dem selv .
• Null-lengde titleog contentverdier vil aldri vise en popover.
• Spesifiser container: 'body'for å unngå å gjengi problemer i mer komplekse komponenter (som våre inndatagrupper, knappegrupper osv.).
• Å utløse popovers på skjulte elementer vil ikke fungere.
• Popovers for .disabledeller disabledelementer må utløses på et wrapper-element.
• Når de utløses fra ankere som går over flere linjer, vil popovers være sentrert mellom ankrenes totale bredde. Bruk .text-nowrappå din <a>s for å unngå denne oppførselen.
• Popovers må skjules før de tilhørende elementene er fjernet fra DOM.
• Popovers kan utløses takket være et element inne i en skygge-DOM.

Fortsett å lese for å se hvordan popovers fungerer med noen eksempler.

Eksempel: Aktiver popovers overalt

En måte å initialisere alle popovers på en side er å velge dem etter data-bs-toggleattributtet deres:

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

Eksempel: Bruk av containeralternativet

Når du har noen stiler på et overordnet element som forstyrrer en popover, vil du spesifisere en egendefinert containerslik at popoverens HTML vises i det elementet 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 alternativer er tilgjengelige: topp-, høyre-, bunn- og venstrejustert. Retningene speiles når du bruker 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>

Avvis ved neste klikk

Bruk focustriggeren til å avvise popovers ved brukerens neste klikk på et annet element enn veksleelementet.

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

Deaktiverte elementer

Elementer med disabledattributtet er ikke interaktive, noe som betyr at brukere ikke kan holde musepekeren eller klikke på dem for å utløse en popover (eller verktøytips). Som en løsning bør du utløse popover fra en innpakning <div>eller <span>, ideelt gjort tastaturfokuserbar ved hjelp av tabindex="0".

For deaktiverte popover-utløsere foretrekker du kanskje også data-bs-trigger="hover focus"at popover-en vises som umiddelbar visuell tilbakemelding til brukerne dine, da de kanskje ikke forventer å klikke på et deaktivert 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);

Bruk

Aktiver popovers via JavaScript:

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

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-bs-, som i data-bs-animation="". Sørg for å endre sakstype for alternativnavnet fra camelCase til kebab-case når du sender alternativene via dataattributter. Bruk for eksempel i stedet for å data-bs-customClass="beautifier"bruke data-bs-custom-class="beautifier".

Bruker funksjon medpopperConfig

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

Metoder

forestilling

Avslører et elements popover. Går tilbake til den som ringer før popover faktisk har blitt vist (dvs. før shown.bs.popoverhendelsen inntreffer). Dette regnes som en "manuell" utløsning av popover. Popovers hvis tittel og innhold begge har null lengde, vises aldri.

myPopover.show()

gjemme seg

Skjuler et elements popover. Går tilbake til den som ringer før popover faktisk har blitt skjult (dvs. før hidden.bs.popoverhendelsen inntreffer). Dette regnes som en "manuell" utløsning av popover.

myPopover.hide()

veksle

Veksler på et elements popover. Går tilbake til den som ringer før popover-en faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.popovereller hidden.bs.popoverinntreffer). Dette regnes som en "manuell" utløsning av popover.

myPopover.toggle()

kaste

Skjuler og ødelegger et elements popover (fjerner lagrede data på DOM-elementet). Popovers som bruker delegering (som opprettes ved hjelp av selectoralternativet ) kan ikke ødelegges individuelt på etterkommere triggerelementer.

myPopover.dispose()

muliggjøre

Gir et elements popover muligheten til å bli vist. Popovers er aktivert som standard.

myPopover.enable()

deaktiver

Fjerner muligheten for at et elements popover skal vises. Popover vil kun kunne vises hvis den er aktivert på nytt.

myPopover.disable()

toggleEnabled

Veksler på muligheten for at et elements popover skal vises eller skjules.

myPopover.toggleEnabled()

Oppdater

Oppdaterer posisjonen til et elements popover.

myPopover.update()

getInstance

Statisk metode som lar deg få popover-forekomsten knyttet til et DOM-element

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

getOrCreateInstance

Statisk metode som lar deg få popover-forekomsten knyttet til et DOM-element, eller opprette en ny i tilfelle den ikke ble initialisert

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

arrangementer

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