Popovers

Vaaiga lautele

Mea e iloa pe a faʻaaogaina le popover plugin:

• Popovers fa'alagolago ile faletusi lona tolu Popper mo le fa'atulagaina. E tatau ona e aofia ai popper.min.js i luma o le bootstrap.js poʻo le faʻaoga bootstrap.bundle.min.js/ bootstrap.bundle.jso loʻo i ai Popper ina ia mafai ai ona galue popovers!
• Popovers manaʻomia le meafaigaluega faʻapipiʻi e fai ma faʻalagolago.
• Popovers e filifili i totonu mo mafuaʻaga o faʻatinoga, o lea e tatau ai ona e amataina oe lava ia .
• Ole umi ole umi titlema contenttau o le a le fa'aalia se popover.
• Fa'ama'oti container: 'body'e 'alofia ai le fa'atupuina o fa'afitauli i vaega e sili atu ona lavelave (pei o tatou vaega fa'aoga, vaega fa'amau, ma isi).
• O le faʻaosoina o popovers i elemene natia o le a le aoga.
• Popovers mo .disabledpo'o disabledelemene e tatau ona fa'aoso i luga o se elemene afifi.
• A fa'aoso mai taula e afifi i luga o le tele o laina, popovers o le a totonugalemu i le va o taula' lautele lautele. Fa'aoga .text-nowrapi lou <a>s e aloese ai mai lenei amio.
• Popovers e tatau ona natia aʻo leʻi aveesea a latou elemene tutusa mai le DOM.
• Popovers e mafai ona faʻaosoina faʻafetai i se elemene i totonu o se ata lafoia DOM.

Fa'aauau le faitau e va'ai pe fa'afefea ona fa'aoga popovers ma nisi fa'ata'ita'iga.

Fa'ata'ita'iga: Fa'amalo popovers i so'o se mea

O se tasi o auala e amata ai popovers uma i luga o se itulau o le filifilia lea e ala i o latou data-bs-toggleuiga:

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

Faataitaiga: Faʻaaogaina le containerfilifiliga

A iai ni au sitaili i luga o se elemene matua e faʻalavelave i se popover, e te manaʻo e faʻamaonia se aganuʻu containerina ia faʻaalia le HTML o le popover i totonu o lena elemene nai lo.

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

Faataitaiga

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

Fa ituala

E fa filifiliga o lo'o avanoa: luga, taumatau, pito i lalo, ma agavale fa'aoga. E fa'aali fa'atonuga pe a fa'aogaina le Bootstrap ile 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>

Fa'ate'a ile isi kiliki

Fa'aoga le focusfa'aoso e fa'ate'a ai popovers i le isi kiliki a le tagata fa'aoga o se elemene ese nai lo le elemene sui.

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

Elemene le atoatoa

O elemene e iai le disableduiga e le fegalegaleai, o lona uiga e le mafai e tagata faʻaoga ona faʻafefe pe kiliki i latou e faʻaoso ai se popover (poʻo se meafaigaluega). I le avea ai o se fofo, e te manaʻo e faʻaoso le popover mai se afifi <div>poʻo <span>, faʻaoga lelei le faʻaogaina o le keyboard-faʻaaoga tabindex="0".

Mo fa'aoso popover fa'aletonu, atonu e te mana'o data-bs-trigger="hover focus"fo'i ina ia fa'aalia le popover o se fa'aaliga va'aia vave i au tagata fa'aoga ona latou te le o fa'amoemoe e kiliki i luga o se elemene fa'aletonu.

<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

Fuafuaga

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

Fa'aoga

Fa'amalo popovers e ala i le JavaScript:

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-animation="". Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using data-bs-customClass="beautifier", use data-bs-custom-class="beautifier".

Using function with popperConfig

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

Methods

show

Reveals an element’s popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed.

myPopover.show()

hide

Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

myPopover.hide()

toggle

Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the shown.bs.popover or hidden.bs.popover event occurs). This is considered a “manual” triggering of the popover.

myPopover.toggle()

dispose

Hides and destroys an element’s popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

myPopover.dispose()

enable

Gives an element’s popover the ability to be shown. Popovers are enabled by default.

myPopover.enable()

disable

Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.

myPopover.disable()

toggleEnabled

Toggles the ability for an element’s popover to be shown or hidden.

myPopover.toggleEnabled()

update

Updates the position of an element’s popover.

myPopover.update()

getInstance

Static method which allows you to get the popover instance associated with a DOM element

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

getOrCreateInstance

Static method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn’t initialized

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

Events

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