Popovers

Oversigt

Ting at vide, når du bruger popover-plugin:

• Popovers er afhængige af tredjepartsbiblioteket Popper til positionering. Du skal inkludere popper.min.js før bootstrap.js, eller bruge en bootstrap.bundle.min.js, der indeholder Popper.
• Popovers kræver popover-pluginet 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.

Fortsæt med at læse for at se, hvordan popovers fungerer med nogle eksempler.

Eksempler

Aktiver popovers

Som nævnt ovenfor skal du initialisere popovers, før de kan bruges. En måde at initialisere alle popovers på en side ville være at vælge dem efter deres data-bs-toggleattribut, som sådan:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Live demo

Vi bruger JavaScript svarende til kodestykket ovenfor til at gengive følgende live popover. Titler indstilles via data-bs-titleog kropsindhold indstilles via data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Fire retninger

Der er fire muligheder: top, højre, bund og venstre. Retninger spejles, når du bruger Bootstrap i RTL. Indstil data-bs-placementfor at ændre retningen.

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

Brugerdefineredecontainer

Når du har nogle typografier på et overordnet element, der forstyrrer en popover, skal du angive en brugerdefineret container, så popoverens HTML vises i dette element i stedet. Dette er almindeligt i responsive tabeller, inputgrupper og lignende.

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

En anden situation, hvor du ønsker at angive en eksplicit brugerdefineret container, er popovers i en modal dialog for at sikre, at selve popoveren er tilføjet til modalen. Dette er især vigtigt for popovers, der indeholder interaktive elementer – modale dialoger vil fange fokus, så medmindre popoveren er et underordnet element af modalen, vil brugerne ikke være i stand til at fokusere eller aktivere disse interaktive elementer.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Brugerdefinerede popovers

Du kan tilpasse udseendet af popovers ved hjælp af CSS-variabler . Vi indstiller en brugerdefineret klasse med data-bs-custom-class="custom-popover"til at omfatte vores brugerdefinerede udseende og bruger den til at tilsidesætte nogle af de lokale CSS-variabler.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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 wrapper <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>

CSS

Variabler

Som en del af Bootstraps udviklende CSS-variabletilgang bruger popovers nu lokale CSS-variabler .popovertil forbedret realtidstilpasning. Værdier for CSS-variablerne indstilles via Sass, så Sass-tilpasning understøttes også stadig.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass variable

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Brug

Aktiver popovers via JavaScript:

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

Muligheder

Da muligheder kan videregives via dataattributter eller JavaScript, kan du tilføje et indstillingsnavn til data-bs-, som i data-bs-animation="{value}". Sørg for at ændre sagstypen for indstillingsnavnet fra " camelCase " til " kebab-case ", når du videregiver mulighederne via dataattributter. Brug for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 understøtter alle komponenter en eksperimentel reserveret dataattribut data-bs-config, der kan rumme simpel komponentkonfiguration som en JSON-streng. Når et element har data-bs-config='{"delay":0, "title":123}'og data-bs-title="456"attributter, vil den endelige titleværdi være, 456og de separate dataattributter vil tilsidesætte værdier givet på data-bs-config. Derudover er eksisterende dataattributter i stand til at rumme JSON-værdier som data-bs-delay='{"show":0,"hide":150}'.

Bruger funktion medpopperConfig

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

Metoder

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Begivenheder

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