Popovers

Iwwersiicht

Saachen ze wëssen wann Dir de Popover Plugin benotzt:

• Popovers vertrauen op der drëtter Partei Bibliothéik Popper fir positionéieren. Dir musst popper.min.js virun enthalen bootstrap.js, oder een benotzen bootstrap.bundle.min.jsdeen Popper enthält.
• Popovers erfuerderen de Popover Plugin als Ofhängegkeet.
• Popovers sinn opt-in aus Leeschtungsgrënn, also musst Dir se selwer initialiséieren .
• Null-Längt titlea contentWäerter wäert weisen ni eng Popover.
• Spezifizéieren container: 'body'fir Rendering Probleemer a méi komplexe Komponenten ze vermeiden (wéi eis Inputgruppen, Knäppchengruppen, etc.).
• Ausléiser Popovers op verstoppt Elementer wäert net schaffen.
• Popovers fir .disabledoder disabledElementer muss op engem wrapper Element ausgeléist ginn.
• Wann aus Anker ausgeléist gëtt, déi iwwer verschidde Linnen wéckelen, ginn Popovers tëscht den Gesamtbreet vun den Anker zentréiert. Benotzt .text-nowrapop Är <a>s dëst Verhalen ze vermeiden.
• Popovers musse verstoppt ginn ier hir entspriechend Elementer aus der DOM geläscht ginn.
• Popovers kënnen ausgeléist ginn duerch en Element an engem Schied DOM.

Weiderliesen fir ze kucken wéi Popovers mat e puer Beispiller funktionnéieren.

Beispiller

Aktivéiert Popovers

Wéi uewen ernimmt, musst Dir Popovers initialiséieren ier se benotzt kënne ginn. Ee Wee fir all Popovers op enger Säit ze initialiséieren wier se no hirem data-bs-toggleAttribut ze wielen, sou wéi:

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

Live Demo

Mir benotzen JavaScript ähnlech wéi den Snippet hei uewen fir de folgende Live Popover ze maachen. Titele ginn iwwer data-bs-titlea Kierperinhalt gesat 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>

Véier Richtungen

Véier Optiounen sinn verfügbar: uewen, riets, ënnen a lénks. D'Richtunge gi gespigelt wann Dir Bootstrap an RTL benotzt. Setzt data-bs-placementfir d'Richtung z'änneren.

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

Benotzerdefinéiertcontainer

Wann Dir e puer Stiler op engem Elterendeel hutt, déi mat engem Popover stéieren, wëllt Dir e Benotzerdefinéiert spezifizéieren, containerfir datt den HTML vum Popover an deem Element amplaz erschéngt. Dëst ass heefeg a reaktiounsfäeger Dëscher, Inputgruppen, an dergläiche.

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

Eng aner Situatioun wou Dir en explizit Benotzerdefinéiert wëllt setzen containersinn Popovers an engem modalen Dialog , fir sécherzestellen datt de Popover selwer un de Modal bäigefüügt ass. Dëst ass besonnesch wichteg fir Popovers déi interaktiv Elementer enthalen - modal Dialoger falen de Fokus, also ausser wann de Popover e Kand Element vum Modal ass, kënnen d'Benotzer dës interaktiv Elementer net fokusséieren oder aktivéieren.

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

Benotzerdefinéiert Popovers

Dir kënnt d'Erscheinung vu Popovers mat CSS Variablen personaliséieren . Mir setzen eng personaliséiert Klass mat data-bs-custom-class="custom-popover"fir eis personaliséiert Erscheinung z'erreechen an ze benotzen fir e puer vun de lokalen CSS Variablen ze iwwerschreiden.

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

Entlooss beim nächste Klick

Benotzt den focusAusléiser fir Popovers op de nächste Klick vum Benotzer vun engem aneren Element ze entloossen wéi de Toggle Element.

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

Behënnert Elementer

Elementer mat dem disabledAttribut sinn net interaktiv, dat heescht datt d'Benotzer net kënnen hover oder klicken fir e Popover (oder Tooltip) auszeléisen. Als Léisung wëllt Dir de Popover aus engem Wrapper ausléisen <div>oder <span>, am Idealfall gemaach Keyboard-fokusséierbar mat tabindex="0".

Fir behënnert Popover Ausléiser, kënnt Dir och léiwer data-bs-trigger="hover focus"sou datt de Popover als direkt visuell Feedback fir Är Benotzer erschéngt, well se net erwaarden datt se op en behënnert Element klickt .

<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

Variablen

Als Deel vum Bootstrap senger evoluéierender CSS Variablen Approche benotzen Popovers elo lokal CSS Variablen op .popoverfir eng verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

  --#{$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 Variablen

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

Benotzung

Aktivéiert Popovers iwwer JavaScript:

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

Optiounen

Wéi Optiounen kënnen iwwer Dateattributer oder JavaScript weidergeleet ginn, kënnt Dir en Optiounsnumm op data-bs-, wéi an data-bs-animation="{value}". Vergewëssert Iech de Falltyp vum Optiounsnumm vun " camelCase " op " Kebab-Case " z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill benotzt data-bs-custom-class="beautifier"amplaz data-bs-customClass="beautifier".

Zënter Bootstrap 5.2.0 ënnerstëtzen all Komponenten en experimentellen reservéierten Dateattribut, data-bs-configdeen eng einfach Komponentkonfiguratioun als JSON-String kann ënnerhuelen. Wann en Element data-bs-config='{"delay":0, "title":123}'an data-bs-title="456"Attributer huet, gëtt de Finale titleWäert 456an déi getrennten Dateattributter iwwerschreiden Wäerter, déi op data-bs-config. Zousätzlech kënnen existent Datenattributer JSON Wäerter wéi data-bs-delay='{"show":0,"hide":150}'.

Benotzt Funktioun matpopperConfig

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

Methoden

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

Evenementer

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