Mga Popover

Pangkalahatang-ideya

Mga bagay na dapat malaman kapag ginagamit ang popover plugin:

• Umaasa ang mga Popover sa 3rd party na library na Popper para sa pagpoposisyon. Dapat mong isama ang popper.min.js bago ang bootstrap.js o gamitin ang bootstrap.bundle.min.js/ bootstrap.bundle.jsna naglalaman ng Popper upang gumana ang mga popover!
• Kinakailangan ng mga Popover ang tooltip plugin bilang dependency.
• Ang mga popover ay nag-opt-in para sa mga dahilan ng pagganap, kaya dapat mong simulan ang mga ito sa iyong sarili .
• Hindi kailanman magpapakita ng popover ang zero-length titleat mga value.content
• Tukuyin container: 'body'upang maiwasan ang pag-render ng mga problema sa mas kumplikadong mga bahagi (tulad ng aming mga pangkat ng input, mga pangkat ng button, atbp).
• Ang pag-trigger ng mga popover sa mga nakatagong elemento ay hindi gagana.
• Dapat na ma-trigger ang mga popover para sa .disabledo mga disabledelemento sa isang elemento ng wrapper.
• Kapag na-trigger mula sa mga anchor na bumabalot sa maraming linya, ang mga popover ay igitna sa pagitan ng kabuuang lapad ng mga anchor. Gamitin .text-nowrapsa iyong <a>s upang maiwasan ang pag-uugaling ito.
• Dapat na itago ang mga popover bago maalis ang mga kaukulang elemento nito sa DOM.
• Maaaring ma-trigger ang mga popover salamat sa isang elemento sa loob ng shadow DOM.

Panatilihin ang pagbabasa upang makita kung paano gumagana ang mga popover kasama ang ilang mga halimbawa.

Halimbawa: Paganahin ang mga popover sa lahat ng dako

Ang isang paraan upang simulan ang lahat ng mga popover sa isang pahina ay ang piliin ang mga ito ayon sa kanilang data-bs-togglekatangian:

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

Halimbawa: Gamit ang containeropsyon

Kapag mayroon kang ilang mga istilo sa isang parent na elemento na nakakasagabal sa isang popover, gugustuhin mong tumukoy ng custom containerupang ang HTML ng popover ay lumabas na lang sa loob ng elementong iyon.

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

Halimbawa

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

Apat na direksyon

Apat na opsyon ang magagamit: naka-align sa itaas, kanan, ibaba, at kaliwa. Ang mga direksyon ay sinasalamin kapag gumagamit ng Bootstrap sa 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>

I-dismiss sa susunod na pag-click

Gamitin ang focustrigger upang i-dismiss ang mga popover sa susunod na pag-click ng user sa ibang elemento kaysa sa toggle na elemento.

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

Mga elementong may kapansanan

Ang mga elementong may disabledattribute ay hindi interactive, ibig sabihin, hindi maaaring i-hover o i-click ng mga user ang mga ito upang mag-trigger ng popover (o tooltip). Bilang isang solusyon, gugustuhin mong i-trigger ang popover mula sa isang wrapper <div>o <span>, perpektong ginawang keyboard-focusable gamit ang tabindex="0".

Para sa mga na-disable na pag-trigger ng popover, maaari mo ring mas gusto data-bs-trigger="hover focus"na ang popover ay lumitaw bilang agarang visual na feedback sa iyong mga user dahil maaaring hindi nila inaasahan na mag- click sa isang hindi pinaganang elemento.

<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

Mga variable

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

Paggamit

Paganahin ang mga popover sa pamamagitan ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-animation="". Siguraduhing baguhin ang uri ng kaso ng pangalan ng opsyon mula sa camelCase patungo sa kebab-case kapag ipinapasa ang mga opsyon sa pamamagitan ng mga katangian ng data. Halimbawa, sa halip na gamitin ang data-bs-customClass="beautifier", gamitin ang data-bs-custom-class="beautifier".

Paggamit ng function na maypopperConfig

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

Paraan

palabas

Nagpapakita ng popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang popover (ibig sabihin, bago shown.bs.popovermangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover. Ang mga popover na ang pamagat at nilalaman ay parehong zero-length ay hindi kailanman ipinapakita.

myPopover.show()

tago

Itinatago ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naitago ang popover (ibig sabihin, bago hidden.bs.popovermangyari ang kaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.

myPopover.hide()

magpalipat-lipat

I-toggle ang popover ng isang elemento. Bumabalik sa tumatawag bago aktwal na naipakita o naitago ang popover (ibig sabihin, bago mangyari ang shown.bs.popovero hidden.bs.popoverkaganapan). Ito ay itinuturing na isang "manual" na pag-trigger ng popover.

myPopover.toggle()

itapon

Itinatago at sinisira ang popover ng isang elemento (Tinatanggal ang nakaimbak na data sa elemento ng DOM). Ang mga popover na gumagamit ng delegasyon (na ginawa gamit ang selectoropsyon ) ay hindi maaaring isa-isang sirain sa mga elemento ng descendant na trigger.

myPopover.dispose()

paganahin

Nagbibigay ng kakayahang maipakita ang popover ng isang elemento. Ang mga popover ay pinagana bilang default.

myPopover.enable()

huwag paganahin

Tinatanggal ang kakayahang maipakita ang popover ng isang elemento. Maipapakita lang ang popover kung ito ay muling pinagana.

myPopover.disable()

toggleEnabled

I-toggle ang kakayahang maipakita o maitago ang popover ng isang elemento.

myPopover.toggleEnabled()

update

Ina-update ang posisyon ng popover ng isang elemento.

myPopover.update()

getInstance

Static na paraan na nagbibigay-daan sa iyong makuha ang popover instance na nauugnay sa isang elemento ng DOM

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

getOrCreateInstance

Static na paraan na nagbibigay-daan sa iyong makuha ang popover instance na nauugnay sa isang elemento ng DOM, o gumawa ng bago kung sakaling hindi ito nasimulan

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

Mga kaganapan

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