Popovers

Overview

Zavatra tokony ho fantatra rehefa mampiasa ny plugin popover:

• Miantehitra amin'ny tranokalan'ny antoko fahatelo Popper ny Popovers amin'ny fametrahana toerana. Tsy maintsy mampiditra popper.min.js aloha bootstrap.jsianao, na mampiasa iray bootstrap.bundle.min.jsmisy Popper.
• Mitaky ny plugin popover ho fiankinan-doha ny Popovers.
• Popovers dia nisafidy noho ny antony fampisehoana, noho izany dia tsy maintsy ataonao voalohany izy ireo .
• Ny halavan'ny aotra titlesy contentny soatoavina dia tsy hampiseho popover velively.
• Mariho container: 'body'mba tsy hisian'ny olana amin'ny singa sarotra kokoa (toy ny vondrona fampidirana, vondrona bokotra, sns).
• Tsy mandeha ny famelezana popover amin'ny singa miafina.
• Ny popovers ho an'ny .disabledna disabledsinga dia tsy maintsy alefa amin'ny singa wrapper.
• Rehefa avy amin'ny vatofantsika mihodidina andalana maromaro, ny popovers dia ho ivon'ny sakan'ny sakan'ny vatofantsika. Ampiasao .text-nowrapamin'ny <a>s anao mba hialana amin'izany fihetsika izany.
• Tsy maintsy afenina ny popovers alohan'ny hanesorana ireo singa mifandraika aminy ao amin'ny DOM.
• Ny popovers dia azo ariana noho ny singa iray ao anaty aloka DOM.

Tohizo ny famakiana hahitana ny fomba fiasan'ny popovers miaraka amin'ny ohatra sasany.

OHATRA

Alefaso ny popovers

Araka ny voalaza etsy ambony dia tsy maintsy manomboka popovers ianao vao azo ampiasaina. Ny fomba iray hanombohana ny popovers rehetra amin'ny pejy iray dia ny fisafidianana azy ireo amin'ny data-bs-toggletoetrany, toy izao:

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

Demo mivantana

Mampiasa JavaScript mitovy amin'ny snippet etsy ambony izahay mba hamoahana ity popover mivantana manaraka ity. Ny lohateny dia apetraka amin'ny alalan'ny data-bs-titleary apetraka amin'ny alalan'ny 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>

Lalana efatra

Misy safidy efatra: ambony, havanana, ambany ary ankavia. Hita taratra ny lalana rehefa mampiasa Bootstrap amin'ny RTL. Atao data-bs-placementhanova ny lalana.

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

fanaocontainer

Rehefa manana fomba sasany amin'ny singa ray aman-dreny izay manelingelina ny popover ianao dia te-hametraka fomba amam-panao containermba hisehoan'ny HTML ny popover ao anatin'io singa io. Izany dia mahazatra amin'ny latabatra mandray andraikitra, vondrona fampidirana, sy ny toy izany.

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

Toe-javatra iray hafa tianao hametrahana fomba amam-panao mazava containerdia ny popovers ao anatin'ny fifanakalozan- dresaka modal , mba hahazoana antoka fa ny popover mihitsy no ampidirina amin'ny modal. Zava-dehibe indrindra izany ho an'ny popover izay misy singa ifandrimbonana - ny fifanakalozan-dresaka modal dia hamandrika ny fifantohana, ka raha tsy singa zaza amin'ny modal ny popover, dia tsy ho afaka hifantoka na hampavitrika ireo singa mifampiresaka ireo ny mpampiasa.

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

Custom popovers

Azonao atao ny manamboatra ny endriky ny popovers amin'ny alàlan'ny variables CSS . Nametraka kilasy mahazatra data-bs-custom-class="custom-popover"izahay mba hamenoana ny endriny mahazatra anay ary ampiasainay hanesorana ny sasany amin'ireo fari-piadidiana CSS eo an-toerana.

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

Alefaso amin'ny tsindrio manaraka

Ampiasao ny focustrigger hanilika ny popovers amin'ny fipihana manaraka ataon'ny mpampiasa amin'ny singa hafa noho ny singa toggle.

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

singa kilemaina

Ny singa manana ny disabledtoetra dia tsy mifampiresaka, midika izany fa tsy afaka mivezivezy na manindry azy ireo ny mpampiasa mba hanesorana popover (na tooltip). Amin'ny maha-famoahana azy dia te-hamosika ny popover avy amin'ny fonony ianao <div>na <span>, izay natao hifantoka amin'ny klavier amin'ny fampiasana tabindex="0".

Ho an'ireo mpikatroka popover kilemaina, azonao atao koa data-bs-trigger="hover focus"ny mampahatsiahy ny mpampiasa anao fa ny popover dia miseho ho fanehoan-kevitra hita maso eo no ho eo amin'ireo mpampiasa anao satria mety tsy hanantena izy ireo hanindry singa kilemaina.

<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

hiovaova

Ao anatin'ny fomba fiovaovan'ny CSS mivoatra an'ny Bootstrap, ny popovers izao dia mampiasa ny fari-piadidiana CSS eo an .popover-toerana ho an'ny fanatsarana ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana 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 variables

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

Fampiasana

Alefaso ny popovers amin'ny JavaScript:

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

FANDIKANA

Satria azo ampitaina amin'ny alàlan'ny toetran'ny data na JavaScript ny safidy, azonao atao ny manisy anarana safidy amin'ny data-bs-, toy ny ao amin'ny data-bs-animation="{value}". Ataovy azo antoka fa hanova ny karazana tranga amin'ny anarana safidy avy amin'ny " CamelCase " ho " kebab-case " rehefa mandalo ny safidy amin'ny alàlan'ny toetran'ny data. Ohatra, ampiasao data-bs-custom-class="beautifier"fa tsy data-bs-customClass="beautifier".

Amin'ny Bootstrap 5.2.0, ny singa rehetra dia manohana toetra angon-drakitra natokana ho an'ny fanandramanadata-bs-config izay afaka mametraka ny fandrindrana singa tsotra ho tady JSON. Rehefa manana data-bs-config='{"delay":0, "title":123}'sy data-bs-title="456"toetra ny singa iray, dia ny titlesanda farany 456ary ny toetran'ny angon-drakitra misaraka dia hanongotra ny sanda omena amin'ny data-bs-config. Ankoatr'izay, ny toetran'ny data efa misy dia afaka mametraka ny sanda JSON toy ny data-bs-delay='{"show":0,"hide":150}'.

Fampiasana asa miaraka amin'nypopperConfig

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

fomba

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

zava-mitranga

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