Popover

Overview

Zvinhu zvekuziva kana uchishandisa popover plugin:

• Popovers vanovimba neyechitatu bato raibhurari Popper yekumisikidza . Unofanira kusanganisira popper.min.js pamberi bootstrap.js, kana kushandisa imwe bootstrap.bundle.min.jsine Popper.
• Popovers inoda iyo popover plugin sekutsamira .
• Mapopovers anosarudza-kupinda nekuda kwezvikonzero zvekuita, saka iwe unofanirwa kuzvitangisa iwe pachako .
• Zero-kureba titleuye contentkukosha hazvizomboratidzi popover.
• Nyora container: 'body'kudzivirira kupa matambudziko muzvikamu zvakaoma zvikuru (semapoka edu ekuisa, mapoka emabhatani, nezvimwe).
• Kukurudzira popover pazvinhu zvakavanzika hazvishande.
• Mapopovers e .disabledkana ma disabledelement anofanira kukonzereswa pane wrapper element.
• Kana ikamutswa kubva kune zvibatiso zvinoputira mumitsetse yakawanda, mapopovers achange ari pakati pehupamhi hwezvimiso. Shandisa .text-nowrappane yako <a>kudzivirira maitiro aya.
• Mapopover anofanirwa kuvanzwa zvinhu zvawo zvinowirirana zvisati zvabviswa muDOM.
• Popovers inogona kukonzereswa nekuda kwechinhu chiri mukati memumvuri DOM.

Ramba uchiverenga kuti uone mashandiro anoita popover nemimwe mienzaniso.

Mienzaniso

Vhura mapopovers

Sezvataurwa pamusoro, unofanira kutanga popovers vasati vashandiswa. Imwe nzira yekutanga mapopovers pane peji ingave yekuvasarudza nehunhu hwavo data-bs-toggle, sekudaro:

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

Live demo

Isu tinoshandisa JavaScript yakafanana neiyo snippet iri pamusoro kupa inotevera mhenyu popover. Mazita anoiswa kuburikidza data-bs-titleuye zvemukati zvinosetwa kuburikidza ne 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>

Nzira ina

Zvina zvingasarudzwa zviripo: kumusoro, kurudyi, pasi, uye kuruboshwe. Mafambiro anotaridzwa kana uchishandisa Bootstrap muRTL. Seta data-bs-placementkushandura nzira.

<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

Paunenge uine mamwe masitayera pane chinhu chemubereki chinokanganisa popover, iwe unozoda kutsanangura tsika containerkuitira kuti popover's HTML ioneke mukati mechinhu ichocho. Izvi zvinowanzoitika mumatafura anopindura, mapoka ekuisa, nezvimwe zvakadaro.

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

Imwe mamiriro apo iwe wauchazoda kuseta yakajeka tsika containerndeye popovers mukati memodal dialog , kuve nechokwadi chekuti popover pachayo inowedzerwa kune modal. Izvi zvakanyanya kukosha kune mapopovers ane zvinhu zvinodyidzana - modal dialogs inoteya kutarisa, saka kunze kwekunge popover iri chinhu chemwana che modal, vashandisi havazokwanisa kutarisa kana kumisa zvinhu izvi zvinopindirana.

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

Custom popovers

Iwe unogona kugadzirisa kutaridzika kwepopovers uchishandisa CSS zvinosiyana . Isu tinoseta kirasi data-bs-custom-class="custom-popover"yetsika nekutarisa kutaridzika kwedu kwetsika uye kuishandisa kudarika mamwe emunharaunda CSS akasiyana.

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

Ramba paunodzvanya kunotevera

Shandisa focuschibatiso kuti udzinge mapopovers pakudzvanya kunotevera kwemushandisi kwechimwe chinhu pane chekuchinja.

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

Zvinhu zvakaremara

Zvinhu zvine disabledhunhu hazvidyidzane, zvichireva kuti vashandisi havagone kusimudza kana kudzvanya kuti vakonzerese popover (kana tooltip). Sekushanda, iwe unozoda kukonzeresa popover kubva pakuputira <div>kana <span>, yakanyatsogadzirwa keyboard-inotariswa uchishandisa tabindex="0".

Kune akaremara popover zvinokonzeresa, unogona zvakare kuda data-bs-trigger="hover focus"kuitira kuti popover ioneke semhinduro yekuona nekukurumidza kune vashandisi vako sezvo vangasatarisira kudzvanya chinhu chakaremara.

<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

Variables

Sechikamu cheBootstrap's evolving CSS variables approach, popovers zvino vanoshandisa emuno CSS madhizaini pane .popoveryekusimudzira chaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

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

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

Usage

Gonesa mapopovers kuburikidza neJavaScript:

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

Options

Sezvo sarudzo dzichigona kupfuudzwa kuburikidza nedata hunhu kana JavaScript, unogona kuisa sarudzo zita ku data-bs-, semu data-bs-animation="{value}". Ita shuwa yekushandura mhando yekesi yezita resarudzo kubva ku " camelCase " kuenda ku " kebab-case " kana uchipfuura sarudzo kuburikidza ne data hunhu. Somuenzaniso, shandisa data-bs-custom-class="beautifier"pane data-bs-customClass="beautifier".

Kubva kuBootstrap 5.2.0, zvese zvinongedzo zvinotsigira muyedzo wakachengetedzwa data hunhu data-bs-confighunogona kuisa akareruka chechikamu kumisikidzwa setambo yeJSON. Kana chinhu chine data-bs-config='{"delay":0, "title":123}'uye data-bs-title="456"hunhu, kukosha kwekupedzisira titlekuchave 456uye iyo yakaparadzana data hunhu inodarika kukosha kwakapihwa pa data-bs-config. Pamusoro pezvo, hunhu huripo hwe data hunokwanisa kuisa hunhu hweJSON senge data-bs-delay='{"show":0,"hide":150}'.

Kushandisa basa nepopperConfig

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

Nzira

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

Zviitiko

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