Amashanyarazi

Incamake

Ibintu ugomba kumenya mugihe ukoresheje plugin ya popover:

• Popovers yisunga isomero ryishyaka rya 3 Popper kugirango ihagarare. Ugomba gushyiramo popper.min.js mbere ya bootstrap.js cyangwa gukoresha bootstrap.bundle.min.js/ bootstrap.bundle.jsirimo Popper kugirango popovers ikore!
• Popovers isaba ibikoresho bya plugin nkibisabwa .
• 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.

Urugero: Gushoboza popovers ahantu hose

Uburyo bumwe bwo gutangiza popovers zose kurupapuro kwaba ari uguhitamo data-bs-togglekubiranga:

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

Urugero: Ukoresheje containeramahitamo

Mugihe ufite uburyo bumwe kubintu byababyeyi bibangamira popover, uzashaka kwerekana imigenzo containerkugirango HTML ya popover igaragara muri kiriya kintu aho.

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

Urugero

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

Ibyerekezo bine

Amahitamo ane arahari: hejuru, iburyo, hepfo, n'ibumoso. Icyerekezo kirimo indorerwamo mugihe ukoresheje Bootstrap muri 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>

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

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>

Sass

Ibihinduka

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

Ikoreshwa

Gushoboza popovers ukoresheje JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-bs-, Nka Muri data-bs-animation="". Witondere guhindura ubwoko bwurubanza rwamazina kuva kuri camelCase kuri kebab-urubanza mugihe utambutsa amahitamo ukoresheje ibiranga amakuru. Kurugero, aho gukoresha data-bs-customClass="beautifier", koresha data-bs-custom-class="beautifier".

Gukoresha imikorere hamwepopperConfig

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

Uburyo

kwerekana

Yerekana ikintu cya popover. Garuka kumuhamagara mbere yuko popover yerekanwe (nukuvuga mbere yuko shown.bs.popoveribyabaye biba). Ibi bifatwa nk "intoki" itera popover. Popovers ifite umutwe hamwe nibirimo byombi uburebure bwa zeru ntibigaragara.

myPopover.show()

kwihisha

Hisha ikintu cya popover. Garuka kumuhamagaye mbere yuko popover ihishwa mubyukuri (nukuvuga mbere yuko hidden.bs.popoveribyabaye biba). Ibi bifatwa nk "intoki" itera popover.

myPopover.hide()

guhinduranya

Kuzuza ikintu cya popover. Garuka kumuhamagara mbere yuko popover yerekanwe cyangwa yihishe (nukuvuga mbere yuko ibyabaye shown.bs.popovercyangwa hidden.bs.popoveribyabaye bibaho). Ibi bifatwa nk "intoki" itera popover.

myPopover.toggle()

guta

Hisha kandi usenye ikintu cya popover (Kuraho amakuru yabitswe kubintu bya DOM). Popovers ikoresha delegasiyo (yashizweho hakoreshejwe amahitamoselector ) ntishobora gusenywa kugiti cye kubintu bikomokaho .

myPopover.dispose()

Gushoboza

Itanga ikintu cya popover ubushobozi bwo kwerekanwa. Popovers ishoboye kubisanzwe.

myPopover.enable()

guhagarika

Kuraho ubushobozi bwa element ya popover kugirango yerekanwe. Popover izashobora kwerekanwa gusa niba yongeye gukora.

myPopover.disable()

Guhindura

Kuzamura ubushobozi bwa popover yibintu kugirango yerekanwe cyangwa ihishe.

myPopover.toggleEnabled()

kuvugurura

Kuvugurura umwanya wibintu bya popover.

myPopover.update()

Kubona

Uburyo buhamye butuma ubona urugero rwa popover rujyanye nibintu bya DOM

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

GetOrCreateInstance

Uburyo buhamye butuma ubona urugero rwa popover rujyanye nibintu bya DOM, cyangwa gukora bundi bushya mugihe bitatangijwe

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

Ibyabaye

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