Source

Popovers

Dokumintaasje en foarbylden foar it tafoegjen fan Bootstrap-popovers, lykas dy fûn yn iOS, oan elk elemint op jo side.

Oersicht

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

  • Popovers fertrouwe op de 3rd party bibleteek Popper.js foar posisjonearring. Jo moatte popper.min.js opnimme foardat bootstrap.js of brûke bootstrap.bundle.min.js/ bootstrap.bundle.jsdy't Popper.js befettet om popovers te wurkjen!
  • Popovers fereaskje de tooltip-plugin as ôfhinklikens.
  • As jo ​​​​ús JavaScript bouwe fanút boarne, fereasketutil.js it .
  • 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 white-space: nowrap;op jo <a>s om dit gedrach te foarkommen.
  • Popovers moatte ferburgen wurde foardat har oerienkommende eleminten binne fuortsmiten fan 'e 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-toggleattribút:

$(function () {
  $('[data-toggle="popover"]').popover()
})

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.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Foarbyld

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-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.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  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.

Spesifike opmaak nedich foar ôfwizen-op-folgjende-klik

Foar goed cross-browser en cross-platform gedrach moatte jo de <a>tag brûke, net de <button>tag, en jo moatte ek in tabindexattribút opnimme.

Dismissible popover 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  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 út in wrapper triggerje <div>of <span>it pointer-eventsop it útskeakele elemint oerskriuwe.

Foar útskeakele popover-triggers kinne jo ek leaver data-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Gebrûk

Popovers ynskeakelje fia JavaScript:

$('#example').popover(options)

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-animation="".

Namme Type Standert Beskriuwing
animaasje boolean wier Tapasse in CSS-fade-oergong op 'e popover
kontener string | elemint | falsk falsk

Foegje de popover ta oan in spesifyk elemint. Foarbyld container: 'body':. Dizze opsje is benammen nuttich om't it jo de popover yn 'e stream fan it dokumint yn' e buert fan it aktivearjende elemint kinne pleatse - wat foarkomt dat de popover fan it aktivearjende elemint wei sweeft by in finstergrutte feroarje.
ynhâld string | elemint | funksje ''

Standert ynhâldwearde as data-contentattribút net oanwêzich is.

As in funksje wurdt jûn, wurdt it neamd mei syn thisferwizing set nei it elemint dat de popover is hechte oan.
fertraging nûmer | objekt 0

Fertraging fan it sjen en ferbergjen fan de popover (ms) - jildt net foar manuele triggertype

As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show

Objektstruktuer is:delay: { "show": 500, "hide": 100 }
html boolean falsk Foegje HTML yn 'e popover. As it falsk is, textsil de metoade fan jQuery brûkt wurde om ynhâld yn 'e DOM yn te foegjen. Brûk tekst as jo soargen meitsje oer XSS-oanfallen.
pleatsing string | funksje 'rjochts'

Hoe te pleatsen de popover - auto | top | ûnderen | lofts | rjochts.
Wannear autois oantsjutte, sil it de popover dynamysk reorientearje.

As in funksje brûkt wurdt om de pleatsing te bepalen, wurdt it neamd mei de popover DOM-knooppunt as earste argumint en it triggerelemint DOM-knooppunt as twadde. De thiskontekst is ynsteld op it popover-eksimplaar.
selector string | falsk falsk As in selector wurdt foarsjoen, sil popover objekten wurde delegearre oan de oantsjutte doelen. Yn 'e praktyk wurdt dit brûkt om dynamyske HTML-ynhâld yn te skeakeljen om popovers tafoege te hawwen. Sjoch dit en in ynformatyf foarbyld .
sjabloan string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Basis HTML om te brûken by it meitsjen fan de popover.

De popover's titlesille yn 'e .popover-header.

De popover's contentsille yn 'e .popover-body.

.arrowsil de pylk fan 'e popover wurde.

De bûtenste wrapper elemint moat hawwe de .popoverklasse.
titel string | elemint | funksje ''

Standert titelwearde as titleattribút net oanwêzich is.

As in funksje wurdt jûn, wurdt it neamd mei syn thisferwizing set nei it elemint dat de popover is hechte oan.
trekker string 'klik' Hoe popover wurdt aktivearre - klik | sweef | fokus | hantlieding. Jo kinne meardere triggers trochjaan; skiede se mei in romte. `manual` kin net kombineare wurde mei in oare trigger.
offset nûmer | string 0 Offset fan 'e popover relatyf oan syn doel. Foar mear ynformaasje ferwize nei de offsetdokuminten fan Popper.js .
fallbackPlacement string | array 'flip' Tastean om oan te jaan hokker posysje Popper sil brûke by fallback. Foar mear ynformaasje ferwize nei Popper.js's gedrachsdokuminten
skieding string | elemint 'scrollParent' Overflow beheining grins fan de popover. Akseptearret de wearden fan 'viewport', 'window', 'scrollParent', of in HTMLElement-referinsje (allinich JavaScript). Foar mear ynformaasje ferwize nei Popper.js's preventOverflow-dokuminten .

Gegevensattributen foar yndividuele popovers

Opsjes foar yndividuele popovers kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen, lykas hjirboppe útlein.

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje.

$().popover(options)

Inisjalisearje popovers foar in elemint kolleksje.

.popover('show')

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 sawol de titel as de ynhâld gjin lingte hawwe, wurde nea werjûn.

$('#element').popover('show')

.popover('hide')

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.

$('#element').popover('hide')

.popover('toggle')

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.

$('#element').popover('toggle')

.popover('dispose')

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

$('#element').popover('dispose')

.popover('enable')

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

$('#element').popover('enable')

.popover('disable')

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.

$('#element').popover('disable')

.popover('toggleEnabled')

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

$('#element').popover('toggleEnabled')

.popover('update')

Updatet de posysje fan in popover fan in elemint.

$('#element').popover('update')

Eveneminten

Event Type Beskriuwing
show.bs.popover Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
shown.bs.popover Dit evenemint wurdt ûntslein as de popover sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
hide.bs.popover Dit barren wurdt fuortendaliks ûntslein as de hideeksimplaarmetoade oanroppen is.
hidden.bs.popover Dit evenemint wurdt ûntslein as de popover klear is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
ynfoege.bs.popover Dit evenemint wurdt ûntslein nei it show.bs.popoverevenemint as it popover-sjabloan is tafoege oan de DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})