Popovers

Nkatsakanyo

Swilo leswi u faneleke u swi tiva loko u tirhisa plugin ya popover:

• Popovers yi titshege hi layiburari ya 3rd party Popper eka xiyimo. U fanele ku katsa popper.min.js emahlweni ka bootstrap.js kumbe u tirhisa bootstrap.bundle.min.js/ bootstrap.bundle.jsleyi nga na Popper leswaku ti-popovers ti tirha!
• Popovers yi lava plugin ya tooltip tanihi ku titshega.
• Ti-popovers i ti-opt-in hikwalaho ka swivangelo swa matirhelo, hikwalaho u fanele u ti sungula hi wexe .
• Zero-length titlena contentvalues ​​a swi nge pfuki swi kombisi popover.
• Boxa container: 'body'ku papalata swiphiqo swa ku hundzuluxela eka swiphemu leswi rharhanganeke swinene (ku fana na mintlawa ya hina ya ku nghenisa, mintlawa ya swikomba-nkarhi, na swin’wana).
• Ku hlohlotela ti-popovers eka swiaki leswi fihliweke a swi nge tirhi.
• Popovers for .disabledkumbe disabledti elements tifanele ku pfuriwa eka element ya wrapper.
• Loko yi hlohleteriwa kusuka eka ti anchors leti phutselaka eka milayeni yotala, ti popovers titava tiri exikarhi exikarhi ka ku anama hinkwako ka ti anchors. Tirhisa .text-nowrapeka s ya wena <a>ku papalata mahanyelo lawa.
• Ti popovers tifanele ku fihliwa loko ti elements ta tona leti fambelanaka tinga se susiwa eka DOM.
• Popovers yinga pfuriwa hiku khensa element endzeni ka shadow DOM.

Tshama u ri karhi u hlaya ku vona ndlela leyi ti- popover ti tirhaka ha yona hi swikombiso swin’wana.

Xikombiso: Endla leswaku ti-popovers ti tirha hinkwako-nkwako

Ndlela yin’wana yo sungula ti-popover hinkwato eka tluka ku nga va ku ti hlawula hi data-bs-togglexihlawulekisi xa tona:

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

Xikombiso: Ku tirhisa containernhlawulo

Loko u ri na switayele swin’wana eka elemente ya mutswari leswi kavanyetaka popover, u ta lava ku boxa ntolovelo containerleswaku HTML ya popover yi humelela endzeni ka elemente yoleyo ematshan’wini ya sweswo.

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

Xikombiso

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

Tindlela ta mune

Ku ni swilo swa mune leswi u nga swi hlawulaka: leswi ringanisiweke ehenhla, exineneni, ehansi ni le ximatsi. Swiletelo swi kombisiwa hi xivoni loko u tirhisa Bootstrap eka 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>

Dismiss eka ku click loku landzelaka

Tirhisa focusxihlohloteri ku hlongola ti-popover eka ku tsindziyela loku landzelaka ka mutirhisi ka elemente yo hambana ku tlula elemente yo cinca-cinca.

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

Swiaki leswi lamaleke

Swiaki leswi nga na disabledxihlawulekisi a swi tirhisani, leswi vulaka leswaku vatirhisi a va nge swi koti ku hover kumbe ku swi tsindziyela ku pfuxa popover (kumbe tooltip). Tanihi ndlela yo tshungula, u ta lava ku pfuxa popover ku suka eka xifunengeto <div>kumbe <span>, hi ndlela leyinene yi endliwe leswaku yi kongomisiwa eka khibhodi hi ku tirhisa tabindex="0".

Eka swihlohloteri swa popover leswi lamaleke, u nga ha tlhela u tsakela data-bs-trigger="hover focus"leswaku popover yi humelela tanihi vuyelo bya xihatla bya xivono eka vatirhisi va wena tanihileswi va nga ha langutelaka ku tikhoma eka elemente leyi lamaleke.

<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

Swilo leswi cinca-cincaka

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

Matirhiselo

Endla leswaku ti-popovers ti tirha hi ku tirhisa JavaScript:

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-bs-, tanihi le ka data-bs-animation="". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka camelCase ku ya eka kebab-case loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, ematshan’weni yo tirhisa data-bs-customClass="beautifier", tirhisa data-bs-custom-class="beautifier".

Ku tirhisa ntirho napopperConfig

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

Maendlelo

kombisa

Ku paluxa popover ya elemente. Ku tlhelela eka mufoyini loko popover yi nga si kombisiwa hakunene (i.e. shown.bs.popoverxiendlakalo xi nga si humelela). Leswi swi tekiwa tanihi ku hlohlotela “manual” ka popover. Ti-popover leti nhloko-mhaka ya tona ni leswi nga endzeni ka tona swi nga zero-length a swi si tshama swi kombisiwa.

myPopover.show()

tumbela

Ku tumbeta popover ya elemente. Ku tlhelela eka mufoyini loko popover yi nga si fihliwa hakunene (i.e. hidden.bs.popoverxiendlakalo xi nga si humelela). Leswi swi tekiwa tanihi ku hlohlotela “manual” ka popover.

myPopover.hide()

ku cinca-cinca

Ku cinca-cinca popover ya elemente. Ku tlhelela eka mufoyini loko popover yi nga si kombisiwa hakunene kumbe ku tumbetiwa (i.e. emahlweni ka ku humelela shown.bs.popoverkumbe hidden.bs.popoverxiendlakalo). Leswi swi tekiwa tanihi ku hlohlotela “manual” ka popover.

myPopover.toggle()

lahla

Ku tumbeta no herisa popover ya elemente (Ku susa data leyi hlayisiweke eka elemente ya DOM). Popovers leyi tirhisaka delegation (leswi endliwaka hi ku tirhisa selectoroption ) a yi nge herisiwi hi yoxe eka ti descendant trigger elements.

myPopover.dispose()

koteka

Swi nyika popover ya elemente vuswikoti byo kombisiwa. Popovers yi tirhisiwa hi ku tiyimisela.

myPopover.enable()

vulamari

Ku susa vuswikoti bya ku kombisiwa ka popover ya elemente. Popover yi ta kota ku kombisiwa ntsena loko yi tlhela yi tirhisiwa.

myPopover.disable()

toggleYi pfuriwile

Toggles vuswikoti bya leswaku popover ya element yi kombisiwa kumbe ku fihliwa.

myPopover.toggleEnabled()

pfuxeta

Ku pfuxeta xiyimo xa popover ya elemente.

myPopover.update()

getXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa popover lexi fambelanaka na elemente ya DOM

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

kumaKumbeEndlaXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa popover lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga

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

Swiendlakalo

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