Mga Popover

Pangkalahatang-ideya

Mga bagay na dapat malaman kapag ginagamit ang popover plugin:

• Umaasa ang mga Popover sa third party na library na Popper para sa pagpoposisyon. Dapat mong isama ang popper.min.js bago bootstrap.js, o gumamit ng isa bootstrap.bundle.min.jsna naglalaman ng Popper.
• Ang mga popover ay nangangailangan ng popover plugin bilang isang 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.

Mga halimbawa

Paganahin ang mga popover

Gaya ng nabanggit sa itaas, dapat mong simulan ang mga popover bago sila magamit. 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, tulad nito:

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

Live na demo

Gumagamit kami ng JavaScript na katulad ng snippet sa itaas upang i-render ang sumusunod na live na popover. Ang mga pamagat ay itinakda sa pamamagitan ng data-bs-titleat ang nilalaman ng katawan ay itinakda sa pamamagitan ng 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>

Apat na direksyon

Apat na opsyon ang magagamit: itaas, kanan, ibaba, at kaliwa. Ang mga direksyon ay sinasalamin kapag gumagamit ng Bootstrap sa RTL. Itakda data-bs-placementupang baguhin ang direksyon.

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

Customcontainer

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. Karaniwan ito sa mga tumutugon na talahanayan, mga pangkat ng pag-input, at mga katulad nito.

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

Ang isa pang sitwasyon kung saan gugustuhin mong magtakda ng tahasang custom containeray ang mga popover sa loob ng modal dialog , upang matiyak na ang popover mismo ay nakadugtong sa modal. Ito ay partikular na mahalaga para sa mga popover na naglalaman ng mga interactive na elemento – ang mga modal dialog ay bitag ang focus, kaya maliban kung ang popover ay isang child element ng modal, ang mga user ay hindi makakapag-focus o makakapag-activate sa mga interactive na elementong ito.

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

Mga custom na popover

Maaari mong i-customize ang hitsura ng mga popover gamit ang mga variable ng CSS . Nagtakda kami ng custom na klase data-bs-custom-class="custom-popover"upang saklawin ang aming custom na hitsura at gamitin ito para i-override ang ilan sa mga lokal na variable ng CSS.

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

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

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>

CSS

Mga variable

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga popover ang mga lokal na variable ng CSS .popoverpara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

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

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

Paggamit

Paganahin ang mga popover sa pamamagitan ng JavaScript:

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

Mga pagpipilian

Dahil maaaring maipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript, maaari kang magdagdag ng pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-animation="{value}". Siguraduhing baguhin ang uri ng case ng pangalan ng opsyon mula sa " camelCase " sa " kebab-case " kapag ipinapasa ang mga opsyon sa pamamagitan ng mga katangian ng data. Halimbawa, gamitin data-bs-custom-class="beautifier"sa halip na data-bs-customClass="beautifier".

Mula sa Bootstrap 5.2.0, sinusuportahan ng lahat ng mga bahagi ang isang pang- eksperimentong nakalaan na katangian ng data data-bs-configna maaaring maglagay ng simpleng configuration ng bahagi bilang isang string ng JSON. Kapag ang isang elemento ay may data-bs-config='{"delay":0, "title":123}'at data-bs-title="456"mga katangian, ang huling titlehalaga ay magiging 456at ang hiwalay na mga katangian ng data ay mag-o-override sa mga halagang ibinigay sa data-bs-config. Bilang karagdagan, ang mga kasalukuyang katangian ng data ay nakakapaglagay ng mga halaga ng JSON tulad ng data-bs-delay='{"show":0,"hide":150}'.

Paggamit ng function na maypopperConfig

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

Paraan

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

Mga kaganapan

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