Popovers

Oersicht

Dingen om te witten by it brûken fan de popover-plugin:

• Popovers fertrouwe op de 3rd party bibleteek Popper foar posisjonearring. Jo moatte popper.min.js opnimme foardat bootstrap.js of brûke bootstrap.bundle.min.js/ bootstrap.bundle.jsdy't Popper befettet om popovers te wurkjen!
• Popovers fereaskje de tooltip-plugin as ôfhinklikens.
• Popovers binne opt-in foar prestaasjesredenen, dus jo moatte se sels inisjalisearje .
• Nullengte titleen contentwearden sille nea in popover sjen litte.
• Spesifisearje container: 'body'om it werjaan fan problemen yn kompleksere komponinten te foarkommen (lykas ús ynfiergroepen, knopgroepen, ensfh.).
• It triggerjen fan popovers op ferburgen eleminten sil net wurkje.
• Popovers foar .disabledof disabledeleminten moatte wurde aktivearre op in wrapper elemint.
• Wannear't aktivearre fan ankers dy't wrap oer meardere rigels, popovers wurde sintraal tusken de ankers 'algemiene breedte. Brûk .text-nowrapop jo <a>s om dit gedrach te foarkommen.
• Popovers moatte ferburgen wurde foardat har oerienkommende eleminten binne fuortsmiten fan 'e DOM.
• Popovers kinne wurde oanlutsen troch in elemint binnen in skaad DOM.

Bliuw lêze om te sjen hoe't popovers wurkje mei guon foarbylden.

Foarbyld: ynskeakelje popovers oeral

Ien manier om alle popovers op in side te initialisearjen soe wêze om se te selektearjen troch har data-bs-toggleattribút:

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

Foarbyld: Brûk de containeropsje

As jo ​​​​in pear stilen hawwe op in âlderelemint dy't ynterferearje mei in popover, wolle jo in oanpaste spesifisearje containersadat de HTML fan 'e popover yn dat elemint ferskynt.

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

Foarbyld

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

Fjouwer rjochtingen

Fjouwer opsjes binne beskikber: boppe, rjochts, ûnder, en lofts rjochte. Rjochtingen wurde spegele by it brûken fan Bootstrap yn 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>

Ferwiderje by folgjende klik

Brûk de focustrigger om popovers op de folgjende klik fan de brûker fan in oar elemint dan it wikselelemint te ûntslaan.

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

Utskeakele eleminten

Eleminten mei it disabledattribút binne net ynteraktyf, wat betsjuttet dat brûkers net kinne hoverje of klikke om in popover (of tooltip) te triggerjen. As oplossing wolle jo de popover triggerje fanút in wrapper <div>of <span>, ideaal makke toetseboerd-fokusber makke mei tabindex="0".

Foar útskeakele popover-triggers kinne jo ek leaver data-bs-trigger="hover focus"dat de popover ferskynt as direkte fisuele feedback foar jo brûkers, om't se miskien net ferwachtsje te klikken op in útskeakele elemint.

<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

Fariabelen

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

Gebrûk

Popovers ynskeakelje fia JavaScript:

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-bs-, lykas yn data-bs-animation="". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan camelCase nei kebab-case as jo de opsjes trochjaan fia gegevensattributen. Bygelyks, ynstee fan te brûken data-bs-customClass="beautifier", brûk dan data-bs-custom-class="beautifier".

Mei help fan funksje meipopperConfig

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

Metoaden

sjen litte

Bliuwt in popover fan in elemint. Keart werom nei de beller foardat de popover wirklik werjûn is (dus foardat it shown.bs.popoverevenemint bart). Dit wurdt beskôge as in "hânlieding" triggering fan de popover. Popovers wêrfan de titel en ynhâld beide gjin lingte hawwe, wurde nea werjûn.

myPopover.show()

ferstopje

Ferberget de popover fan in elemint. Keart werom nei de beller foardat de popover eins ferburgen is (dus foardat it hidden.bs.popoverbarren plakfynt). Dit wurdt beskôge as in "hânlieding" triggering fan de popover.

myPopover.hide()

wikselje

Skeakelt de popover fan in elemint. Keart werom nei de beller foardat de popover feitlik werjûn of ferburgen is (dus foardat it barren shown.bs.popoverof hidden.bs.popoverbart). Dit wurdt beskôge as in "hânlieding" triggering fan de popover.

myPopover.toggle()

disponearje

Ferberget en ferneatiget de popover fan in elemint (Ferwidert bewarre gegevens op it DOM-elemint). Popovers dy't delegaasje brûke (dy't makke binne mei de selectoropsje ) kinne net yndividueel ferneatige wurde op neikommende trigger-eleminten.

myPopover.dispose()

ynskeakelje

Jout in popover fan in elemint de mooglikheid om te sjen. Popovers binne standert ynskeakele.

myPopover.enable()

útskeakelje

Ferwidert de mooglikheid om in popover fan in elemint te sjen. De popover sil allinich te sjen wêze kinne as it opnij ynskeakele is.

myPopover.disable()

toggleEnabled

Wizigje de mooglikheid om in popover fan in elemint te sjen of te ferbergjen.

myPopover.toggleEnabled()

update

Updatet de posysje fan in popover fan in elemint.

myPopover.update()

getInstance

Statyske metoade wêrmei jo de popover-eksimplaar kinne krije ferbûn mei in DOM-elemint

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

getOrCreateInstance

Statyske metoade wêrmei jo de popover-eksimplaar kinne krije dy't assosjeare is mei in DOM-elemint, of in nij oanmeitsje foar it gefal dat it net inisjalisearre is

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

Eveneminten

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