Popovers

Iwwersiicht

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

• Popovers vertrauen op der 3. Partei Bibliothéik Popper fir positionéieren. Dir musst popper.min.js virum bootstrap.js enthalen oder benotzen bootstrap.bundle.min.js/ bootstrap.bundle.jsdéi Popper enthält fir datt Popovers funktionnéieren!
• Popovers erfuerderen den Tooltip 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.

Beispill: Aktivéiert Popovers iwwerall

Ee Wee fir all Popovers op enger Säit ze initialiséieren wier se no hirem data-bs-toggleAttribut ze wielen:

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

Beispill: Benotzt d' containerOptioun

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.

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

Beispill

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

Véier Richtungen

Véier Optiounen sinn verfügbar: uewen, riets, ënnen a lénks ausgeriicht. D'Richtunge gi gespigelt wann Dir Bootstrap an RTL benotzt.

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

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

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>

Sass

Variablen

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

Benotzung

Aktivéiert Popovers iwwer JavaScript:

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

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-bs-, wéi an data-bs-animation="". Vergewëssert Iech de Falltyp vun der Optiounsnumm vun CamelCase op Kebab-Case z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill, amplaz ze benotzen data-bs-customClass="beautifier", benotzt data-bs-custom-class="beautifier".

Benotzt Funktioun matpopperConfig

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

Methoden

weisen

Enthüllt de Popover vun engem Element. Gitt zréck op den Uruffer ier de Popover tatsächlech gewisen gouf (dh ier d' shown.bs.popoverEvenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Popover ugesinn. Popovers deenen hiren Titel an den Inhalt souwuel null Längt sinn, ginn ni ugewisen.

myPopover.show()

verstoppen

Verstoppt de Popover vun engem Element. Zréck op den Uruffer ier de Popover tatsächlech verstoppt gouf (dh ier d' hidden.bs.popoverEvenement geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Popover ugesinn.

myPopover.hide()

wiesselen

Wiesselt de Popover vun engem Element. Zréck op den Uruffer ier de Popover tatsächlech gewisen oder verstoppt goufshown.bs.popover ( dh ier den hidden.bs.popoverEvent geschitt ass). Dëst gëtt als "manuell" Ausléisung vum Popover ugesinn.

myPopover.toggle()

entsuergen

Verstoppt an zerstéiert de Popover vun engem Element (läscht gespäichert Daten am DOM-Element). Popovers déi Delegatioun benotzen (déi mat der selectorOptioun erstallt ginn ) kënnen net individuell op Nofolger Trigger Elementer zerstéiert ginn.

myPopover.dispose()

aktivéieren

Gëtt dem Popover vun engem Element d'Méiglechkeet ze weisen. Popovers sinn als Standard aktivéiert.

myPopover.enable()

auszeschalten

Entfernt d'Fäegkeet fir de Popover vun engem Element ze weisen. De Popover kann nëmme gewise ginn wann et nei ageschalt ass.

myPopover.disable()

toggleEnabled

Wiesselt d'Fäegkeet fir de Popover vun engem Element ze weisen oder ze verstoppen.

myPopover.toggleEnabled()

update

Aktualiséiert d'Positioun vum Popover vun engem Element.

myPopover.update()

getInstanz

Statesch Method déi Iech erlaabt d'Popover Instanz mat engem DOM Element assoziéiert ze kréien

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

getOrCreateInstance

Statesch Method déi Iech erlaabt d'Popover Instanz mat engem DOM Element assoziéiert ze kréien, oder eng nei ze kreéieren am Fall datt se net initialiséiert gouf

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

Evenementer

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