Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

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 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.
Standert brûkt dizze komponint de ynboude ynhâldsanitizer, dy't alle HTML-eleminten útstript dy't net eksplisyt tastien binne. Sjoch de seksje sanitizer yn ús JavaScript-dokumintaasje foar mear details.
It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

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.

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.

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

Popovers meitsje wurkje foar brûkers fan toetseboerd en assistinte technology

Om toetseboerdbrûkers jo popovers te aktivearjen, moatte jo se allinich tafoegje oan HTML-eleminten dy't tradisjoneel toetseboerdfokusber en ynteraktyf binne (lykas keppelings of formulierkontrôles). Hoewol't willekeurige HTML-eleminten (lykas <span>s) fokusber makke wurde kinne troch it tafoegjen fan it tabindex="0"attribút, sil dit potinsjeel ferfelende en betiizjende ljepperstops tafoegje oan net-ynteraktive eleminten foar toetseboerdbrûkers, en de measte assistive technologyen kundigje op it stuit de ynhâld fan 'e popover yn dizze situaasje net oan. . Fertrouwe ek net allinich op hoveras de trigger foar jo popovers, om't dit sil meitsje dat se ûnmooglik wurde trigger foar toetseboerdbrûkers.

Wylst jo rike, strukturearre HTML kinne ynfoegje yn popovers mei de htmlopsje, riede wy sterk oan dat jo foarkomme dat jo in oerstallige hoemannichte ynhâld tafoegje. De manier wêrop popovers op it stuit wurkje is dat, ienris werjûn, har ynhâld is bûn oan it trigger-elemint mei it aria-describedbyattribút. As resultaat sil de heule ynhâld fan 'e popover wurde oankundige oan brûkers fan assistinte technology as ien lange, ûnûnderbrutsen stream.

Derneist, hoewol it mooglik is om ek ynteraktive kontrôles (lykas formuliereleminten of keppelings) yn jo popover op te nimmen (troch dizze eleminten ta te foegjen oan 'e allowListtastiene attributen en tags), wês bewust dat op it stuit de popover gjin toetseboerdfocusfolchoarder beheart. As in toetseboerdbrûker in popover iepenet, bliuwt de fokus op it triggerende elemint, en om't de popover meastentiids de trigger yn 'e struktuer fan it dokumint net direkt folget, is d'r gjin garânsje dat foarút gean / drukkeTABsil in toetseboerdbrûker yn 'e popover sels ferpleatse. Koartsein, it gewoan tafoegjen fan ynteraktive kontrôles oan in popover sil dizze kontrôles wierskynlik ûnberikber / ûnbrûkber meitsje foar toetseboerdbrûkers en brûkers fan assistinte technologyen, of op syn minst in ûnlogyske algemiene fokusfolchoarder meitsje. Yn dizze gefallen, beskôgje it brûken fan in modaal dialooch ynstee.

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

Tink derom dat om feiligens redenen de sanitize, sanitizeFn, en allowListopsjes net kinne wurde levere mei gegevensattributen.
Namme Type Standert Beskriuwing
animation boolean true Tapasse in CSS-fade-oergong op 'e popover
container string | elemint | falsk false

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.

content string | elemint | funksje ''

Standert ynhâldwearde as data-bs-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.

delay 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 false Foegje HTML yn 'e popover. As falsk, innerTextsil eigendom brûkt wurde om ynhâld yn te foegjen yn 'e DOM. Brûk tekst as jo soargen meitsje oer XSS-oanfallen.
placement string | funksje 'right'

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

As in funksje wurdt brûkt om de pleatsing te bepalen, wurdt it neamd mei de popover DOM-knooppunt as syn earste argumint en it triggerelemint DOM-knooppunt as syn twadde. De thiskontekst is ynsteld op it popover-eksimplaar.

selector string | falsk false 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 .
template string '<div class="popover" role="tooltip"><div class="popover-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.

.popover-arrowsil de pylk fan 'e popover wurde.

De bûtenste wrapper elemint moat hawwe de .popoverklasse.

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

trigger string 'click' Hoe popover wurdt aktivearre - klik | sweef | fokus | hantlieding. Jo kinne meardere triggers trochjaan; skiede se mei in romte. manualkin net kombinearre wurde mei in oare trigger.
fallbackPlacements array ['top', 'right', 'bottom', 'left'] Definiearje fallback-pleatsingen troch in list fan pleatsingen yn array te jaan (yn folchoarder fan foarkar). Foar mear ynformaasje ferwize nei Popper's gedrachsdokuminten
boundary string | elemint 'clippingParents' Overflow beheining grins fan de popover (jildt allinnich foar Popper syn preventOverflow modifier). Standert is it 'clippingParents'en kin it in HTMLElement-referinsje akseptearje (allinich fia JavaScript). Foar mear ynformaasje ferwize nei Popper's detectOverflow-dokuminten .
customClass string | funksje ''

Foegje klassen ta oan de popover as it wurdt toand. Tink derom dat dizze klassen sille wurde tafoege neist alle klassen oantsjutte yn it sjabloan. Om meardere klassen ta te foegjen, skiede se mei spaasjes: 'class-1 class-2'.

Jo kinne ek in funksje trochjaan dy't in inkele tekenrige moat weromjaan mei ekstra klassenammen.

sanitize boolean true De sanearring ynskeakelje of útskeakelje. As aktivearre 'template', 'content'en 'title'opsjes sille wurde sanearre. Sjoch de seksje fan sanitizer yn ús JavaScript-dokumintaasje .
allowList objekt Standertwearde Objekt dat tastiene attributen en tags befettet
sanitizeFn null | funksje null Hjir kinne jo jo eigen sanearringsfunksje leverje. Dit kin handich wêze as jo leaver in tawijd bibleteek brûke om sanitaasje út te fieren.
offset rige | string | funksje [0, 8]

Offset fan 'e popover relatyf oan syn doel. Jo kinne in tekenrige trochjaan yn gegevensattributen mei komma-skieden wearden lykas:data-bs-offset="10,20"

As in funksje brûkt wurdt om de offset te bepalen, wurdt it neamd mei in objekt dat de popper pleatsing, de referinsje en popperrects as syn earste argumint befettet. It triggerelemint DOM-knooppunt wurdt trochjûn as it twadde argumint. De funksje moat in array weromjaan mei twa nûmers: .[skidding, distance]

Foar mear ynformaasje ferwize nei Popper's offset -dokuminten .

popperConfig null | objekt | funksje null

Om de standert Popper-konfiguraasje fan Bootstrap te feroarjen, sjoch Popper's konfiguraasje .

As in funksje wurdt brûkt om de Popper-konfiguraasje te meitsjen, wurdt it neamd mei in objekt dat de standert Popper-konfiguraasje fan de Bootstrap befettet. It helpt jo de standert te brûken en te fusearjen mei jo eigen konfiguraasje. De funksje moat werom in konfiguraasje foarwerp foar Popper.

Gegevensattributen foar yndividuele popovers

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

Mei help fan funksje meipopperConfig

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

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 .

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

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.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})