Mga Popover

Overview

Mga butang nga mahibal-an kung gamiton ang popover plugin:

• Ang mga Popover nagsalig sa 3rd party nga librarya nga Popper para sa pagpoposisyon. Kinahanglan nimong iapil ang popper.min.js sa wala pa ang bootstrap.js o gamita ang bootstrap.bundle.min.js/ bootstrap.bundle.jsnga adunay sulud nga Popper aron molihok ang mga popover!
• Ang mga Popover nanginahanglan sa tooltip plugin isip dependency.
• Ang mga Popover kay nag-opt-in tungod sa mga rason sa performance, mao nga ikaw mismo ang mag-initialize niini .
• Ang zero-length titleug contentmga kantidad dili gyud magpakita ug popover.
• Tinoa container: 'body'aron malikayan ang mga problema sa paghubad sa mas komplikado nga mga sangkap (sama sa among mga grupo sa input, mga grupo sa butones, ug uban pa).
• Ang pag-trigger sa mga popover sa tinago nga mga elemento dili molihok.
• Popovers alang sa .disabledodisabled mga elemento kinahanglang ma-trigger sa usa ka elemento sa wrapper.
• Kung na-trigger gikan sa mga angkla nga nagputos sa daghang mga linya, ang mga popover masentro taliwala sa kinatibuk-ang gilapdon sa mga angkla. Gamita .text-nowrapsa imong <a>s aron malikayan kini nga kinaiya.
• Kinahanglang itago ang mga popover sa dili pa makuha ang mga katugbang nga elemento niini gikan sa DOM.
• Ang mga popover mahimong ma-trigger salamat sa usa ka elemento sa sulod sa anino nga DOM.

Padayon sa pagbasa aron makita kung giunsa paglihok ang mga popover uban ang pipila ka mga pananglitan.

Pananglitan: I-enable ang mga popovers bisan asa

Usa ka paagi sa pagsugod sa tanan nga mga popovers sa usa ka panid mao ang pagpili kanila pinaagi sa ilang mga data-bs-togglehiyas:

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

Pananglitan: Gamit ang containeropsyon

Kung ikaw adunay pipila ka mga estilo sa usa ka ginikanan nga elemento nga makabalda sa usa ka popover, gusto nimong itakda ang usa ka kostumbre containeraron ang HTML sa popover makita sa sulod sa elemento.

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

Pananglitan

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

Upat ka direksyon

Upat ka mga kapilian ang magamit: taas, tuo, ubos, ug wala nga linya. Ang mga direksyon gisalamin kung gigamit ang 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>

Isalikway sa sunod nga pag-klik

Gamita ang focusgatilyo aron isalikway ang mga popover sa sunod nga pag-klik sa user sa laing elemento kay sa toggle nga 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 disabled nga elemento

Ang mga elemento nga adunay disabledattribute dili interactive, nagpasabot nga ang mga user dili maka-hover o maka-click niini aron ma-trigger ang popover (o tooltip). Isip usa ka workaround, gusto nimo nga ma-trigger ang popover gikan sa usa ka wrapper <div>o <span>, mas maayo nga gihimo nga keyboard-focusable gamit ang tabindex="0".

Para sa disabled nga popover triggers, mahimo usab nimo nga gusto data-bs-trigger="hover focus"nga ang popover makita ingon nga diha-diha nga biswal nga feedback sa imong mga tiggamit tungod kay sila dili magdahom nga mag- klik sa usa ka disabled nga 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

I-enable ang mga popovers pinaagi sa JavaScript:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-bs-, sama sa data-bs-animation="". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa camelCase hangtod sa kebab-case kung ipasa ang mga kapilian pinaagi sa mga hiyas sa datos. Pananglitan, imbes gamiton ang data-bs-customClass="beautifier", gamita ang data-bs-custom-class="beautifier".

Paggamit sa function sapopperConfig

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

Pamaagi

ipakita

Nagpadayag sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ipakita ang popover (ie sa wala pa shown.bs.popovermahitabo ang panghitabo). Giisip kini nga usa ka "manwal" nga pag-trigger sa popover. Ang mga Popover kansang titulo ug sulod parehas nga zero ang gitas-on dili ipakita.

myPopover.show()

itago

Nagtago sa popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover tinuod nga gitago (ie sa wala pa hidden.bs.popovermahitabo ang panghitabo). Giisip kini nga usa ka "manwal" nga pag-trigger sa popover.

myPopover.hide()

toggle

I-toggle ang popover sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang popover gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.popovero hidden.bs.popoverpanghitabo). Giisip kini nga usa ka "manwal" nga pag-trigger sa popover.

myPopover.toggle()

ilabay

Gitago ug giguba ang popover sa usa ka elemento (Gitangtang ang gitipigan nga datos sa elemento sa DOM). Ang mga popover nga naggamit sa delegasyon (nga gihimo gamit ang selectoropsyon ) dili mahimong tagsa-tagsa nga gub-on sa mga elemento sa descendant trigger.

myPopover.dispose()

makahimo

Naghatag sa popover sa elemento sa abilidad nga ipakita. Ang mga popover gipalihok pinaagi sa default.

myPopover.enable()

disable

Gitangtang ang abilidad nga ipakita ang popover sa usa ka elemento. Mapakita ra ang popover kung kini ma-enable pag-usab.

myPopover.disable()

toggleEnabled

I-toggle ang abilidad para sa usa ka elemento sa popover nga ipakita o itago.

myPopover.toggleEnabled()

update

Gi-update ang posisyon sa popover sa usa ka elemento.

myPopover.update()

getInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa popover nga pananglitan nga may kalabutan sa usa ka elemento sa DOM

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

getOrCreateInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa popover nga pananglitan nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.

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

Mga panghitabo

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