Popovers

Oversigt

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

• Popovers er afhængige af 3. parts bibliotek Popper til positionering. Du skal inkludere popper.min.js før bootstrap.js eller bruge bootstrap.bundle.min.js/ bootstrap.bundle.jssom indeholder Popper for at popovers kan virke!
• Popovers kræver værktøjstip-plugin 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.

Eksempel: Aktiver popovers overalt

En måde at initialisere alle popovers på en side ville være at vælge dem efter deres data-bs-toggleegenskab:

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

Eksempel: Brug af containermuligheden

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.

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 muligheder er tilgængelige: top-, højre-, bund- og venstrejusteret. Retninger spejles, når du bruger 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>

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

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>

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

Brug

Aktiver popovers via JavaScript:

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

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-bs-, som i data-bs-animation="". Sørg for at ændre sagstypen for indstillingsnavnet fra camelCase til kebab-case, når du videregiver mulighederne via dataattributter. Brug f.eks. i stedet for at data-bs-customClass="beautifier"bruge data-bs-custom-class="beautifier".

Bruger funktion medpopperConfig

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

Metoder

at vise

Afslører et elements popover. Vender tilbage til den, der ringer, før popover-vinduet rent faktisk er blevet vist (dvs. før shown.bs.popoverhændelsen indtræffer). Dette betragtes som en "manuel" udløsning af popover. Popovers, hvis titel og indhold begge er nul-længde, vises aldrig.

myPopover.show()

skjule

Skjuler et elements popover. Vender tilbage til den, der ringer, før popover faktisk er blevet skjult (dvs. før hidden.bs.popoverhændelsen indtræffer). Dette betragtes som en "manuel" udløsning af popover.

myPopover.hide()

skifte

Skifter et elements popover. Vender tilbage til den, der ringer, før pop-over faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.popovereller hidden.bs.popoverindtræffer). Dette betragtes som en "manuel" udløsning af popover.

myPopover.toggle()

bortskaffe

Skjuler og ødelægger et elements popover (fjerner lagrede data på DOM-elementet). Popovers, der bruger delegering (som oprettes ved hjælp af selectormuligheden ), kan ikke individuelt destrueres på descendant trigger-elementer.

myPopover.dispose()

aktivere

Giver et elements popover mulighed for at blive vist. Popovers er aktiveret som standard.

myPopover.enable()

deaktivere

Fjerner muligheden for, at et elements popover vises. Popover vil kun kunne vises, hvis det er genaktiveret.

myPopover.disable()

toggleAktiveret

Skifter muligheden for, at et elements popover vises eller skjules.

myPopover.toggleEnabled()

opdatering

Opdaterer placeringen af ​​et elements popover.

myPopover.update()

getInstance

Statisk metode, som giver dig mulighed for at få popover-forekomsten tilknyttet et DOM-element

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

getOrCreateInstance

Statisk metode, som giver dig mulighed for at få popover-forekomsten tilknyttet et DOM-element eller oprette en ny, hvis den ikke blev initialiseret

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

Begivenheder

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