Amashanyarazi

Incamake

Ibintu ugomba kumenya mugihe ukoresheje plugin ya popover:

• Popovers yishingikiriza kumasomero yandi masomero Popper kugirango ihagarare. Ugomba gushyiramo popper.min.js mbere bootstrap.js, cyangwa ukoreshe imwe bootstrap.bundle.min.jsirimo Popper.
• Popovers isaba plugin ya popover nkubwishingizi .
• Popovers ihitamo kubwimpamvu zikorwa, ugomba rero kubitangiza wenyine .
• Uburebure bwa zeru titlen'indangagaciro contentntibizigera byerekana popover.
• Kugaragaza container: 'body'kugirango wirinde gutanga ibibazo mubice byinshi bigoye (nkitsinda ryacu ryinjiza, amatsinda ya buto, nibindi).
• Gukurura popovers kubintu byihishe ntabwo bizakora.
• Popovers ya .disabledcyangwa disabledibintu bigomba gukururwa kubintu bipfunyika.
• Iyo bivuye ku byuma bifunga imirongo myinshi, popovers izaba hagati yubugari bwa rusange. Koresha .text-nowrapkuri <a>s kugirango wirinde iyi myitwarire.
• Popovers igomba guhishwa mbere yuko ibintu bihuye bivanwa muri DOM.
• Popovers irashobora gukururwa bitewe nikintu kiri imbere mu gicucu DOM.

Komeza usome kugirango urebe uko popovers ikora hamwe ningero zimwe.

Ingero

Gushoboza popovers

Nkuko byavuzwe haruguru, ugomba gutangiza popovers mbere yuko zikoreshwa. Uburyo bumwe bwo gutangiza popovers zose kurupapuro rwaba ari uguhitamo data-bs-togglekubiranga, nka gutya:

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

Kubaho

Dukoresha JavaScript isa nigice cyo hejuru kugirango dutange popover ikurikira. Umutwe washyizweho unyuze data-bs-titlehamwe nibirimo umubiri ushyirwaho 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>

Ibyerekezo bine

Amahitamo ane arahari: hejuru, iburyo, hepfo, n'ibumoso. Icyerekezo kirimo indorerwamo mugihe ukoresheje Bootstrap muri RTL. Shiraho data-bs-placementguhindura icyerekezo.

<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

Mugihe ufite uburyo bumwe kubintu byababyeyi bibangamira popover, uzashaka kwerekana imigenzo containerkugirango HTML ya popover igaragara muri kiriya kintu aho. Ibi birasanzwe mumeza yitabira, amatsinda yinjiza, nibindi bisa.

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

Ikindi kibazo aho uzashaka gushiraho imigenzo containeritomoye ni popovers imbere muburyo bwikiganiro , kugirango umenye neza ko popover ubwayo yongewe kumurongo. Ibi nibyingenzi byingenzi kuri popovers zirimo ibintu byungurana ibitekerezo - modal ibiganiro bizagusha umutego, kuberako keretse popover ari ikintu cyumwana cyuburyo, abakoresha ntibazashobora kwibanda cyangwa gukora ibyo bintu byimikorere.

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

Kumenyekanisha ibicuruzwa

Urashobora guhitamo isura ya popovers ukoresheje CSS ihinduka . Twashyizeho urwego rwihariye hamwe data-bs-custom-class="custom-popover"no kugereranya imiterere yacu kandi tuyikoresha kugirango twirengagize bimwe mubihinduka bya CSS byaho.

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

Kwirukana gukanda

Koresha focusimbarutso kugirango wirukane popovers kumukoresha ukurikiraho ibintu bitandukanye kuruta guhinduranya.

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

Ibintu byahagaritswe

Ibintu bifite disabledikiranga ntabwo bikorana, bivuze ko abakoresha badashobora kugendagenda cyangwa kubikanda kugirango batere popover (cyangwa ibikoresho). Nkumurimo wakazi, uzakenera gukurura popover uhereye kumuzingo <div>cyangwa <span>, nibyiza byakozwe na clavier-yibanze ukoresheje tabindex="0".

Kubimuga byahagaritswe byimikorere, urashobora kandi guhitamo data-bs-trigger="hover focus"kugirango popover igaragara nkibisubizo byihuse kubakoresha nkuko badashobora gutegereza gukanda kubintu bimugaye.

<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

Ibihinduka

Nkigice cya Bootstrap igenda ihinduka CSS ihinduka, popovers ubu ikoresha CSS ihindagurika kumurongo .popoverkugirango wongere igihe-cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

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

Ibihinduka bya Sass

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

Ikoreshwa

Gushoboza popovers ukoresheje JavaScript:

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

Amahitamo

Nkuko amahitamo ashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript, urashobora kongeramo izina ryamahitamo data-bs-, nkuko biri data-bs-animation="{value}". Witondere guhindura ubwoko bwurubanza rwamahitamo kuva " ingamiya " kuri " kebab-urubanza " mugihe utambutsa amahitamo ukoresheje ibiranga amakuru. Kurugero, koresha data-bs-custom-class="beautifier"aho data-bs-customClass="beautifier".

Nko muri Bootstrap 5.2.0, ibice byose bishyigikira igeragezwa ryibitse ryamakuru data-bs-configrishobora kubamo ibice byoroshye nkibikoresho bya JSON. Mugihe ikintu gifite data-bs-config='{"delay":0, "title":123}'nibiranga data-bs-title="456", agaciro kanyuma titlekazaba 456kandi amakuru yihariye aranga agaciro katanzwe kuri data-bs-config. Mubyongeyeho, amakuru ariho aranga arashobora kubika JSON indangagaciro nka data-bs-delay='{"show":0,"hide":150}'.

Gukoresha imikorere hamwepopperConfig

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

Uburyo

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

Ibyabaye

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