Popovers

Overview

Zavatra tokony ho fantatra rehefa mampiasa ny plugin popover:

• Miantehitra amin'ny tranokalan'ny antoko faha-3 Popper ny Popovers amin'ny fametrahana toerana. Tsy maintsy ampidirinao ny popper.min.js alohan'ny bootstrap.js na ampiasao bootstrap.bundle.min.js/ bootstrap.bundle.jsizay misy Popper mba hahafahan'ny popovers miasa!
• Ny Popovers dia mitaky ny plugin tooltip ho fiankinan-doha.
• 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 na aiza na aiza

Ny fomba iray hanombohana ny popovers rehetra amin'ny pejy iray dia ny fisafidianana azy ireo amin'ny data-bs-toggletoetrany:

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

Ohatra: Mampiasa ny containersafidy

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.

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

OHATRA

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

Lalana efatra

Misy safidy efatra: ambony, havanana, ambany ary havia. Hita taratra ny lalana rehefa mampiasa Bootstrap amin'ny 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>

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

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>

Sass

hiovaova

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

Fampiasana

Alefaso ny popovers amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-bs-, toy ny ao amin'ny data-bs-animation="". Ataovy azo antoka ny manova 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, fa tsy mampiasa data-bs-customClass="beautifier", ampiasao data-bs-custom-class="beautifier".

Fampiasana asa miaraka amin'nypopperConfig

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

fomba

FAMPISEHOANA

Mampiseho popover singa iray. Miverina any amin'ny mpiantso alohan'ny tena naseho ny popover (izany hoe alohan'ny shown.bs.popovernitrangan'ny hetsika). Izany dia heverina ho "manual" triggering ny popover. Popovers izay samy aotra ny lohateniny sy ny atiny dia tsy aseho mihitsy.

myPopover.show()

afeno ny

Manafina ny popover an'ny singa iray. Miverina amin'ny mpiantso alohan'ny nafenina ny popover (izany hoe alohan'ny hidden.bs.popovernitrangan'ny hetsika). Izany dia heverina ho "manual" triggering ny popover.

myPopover.hide()

mifamadika

Manova ny popover an'ny singa iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny popover (izany hoe talohan'ny nitrangan'ny shown.bs.popoverna hidden.bs.popoverhetsika). Izany dia heverina ho "manual" triggering ny popover.

myPopover.toggle()

Ario

Manafina sy manimba ny popover an'ny singa iray (Esory ny angona voatahiry ao amin'ny singa DOM). Popovers izay mampiasa delegasiona (izay noforonina amin'ny alalan'ny safidy selector) dia tsy azo ravana tsirairay amin'ny singa trigger taranaka.

myPopover.dispose()

Tadiavo

Manome popover singa iray ny fahafahana aseho. Popovers dia alefa amin'ny alàlan'ny default.

myPopover.enable()

disable

Esory ny fahafahana hanehoana ny popover an'ny singa iray. Ny popover dia tsy ho azo aseho raha toa ka alefa indray.

myPopover.disable()

toggleEnabled

Manova ny fahafahan'ny popover an'ny singa iray aseho na afenina.

myPopover.toggleEnabled()

vaovao farany

Manavao ny toeran'ny popover an'ny singa iray.

myPopover.update()

getInstance

Fomba static izay ahafahanao mahazo ny ohatra popover mifandray amin'ny singa DOM

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

getOrCreateInstance

Fomba static izay ahafahanao mahazo ny ohatra popover mifandray amin'ny singa DOM, na mamorona vaovao raha toa ka tsy natomboka izany

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

zava-mitranga

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