Skip to main content Skip ad navigationem soUicitudo
in English

Popovers

Documenta et exempla addendo Bootstrap popovers, sicut ea quae in iOS inventa sunt, cuivis elementi in situ tuo.

Overview

Rerum scire quando usus est popover plugin:

  • Popoveri confidunt in 3 factione bibliotheca Popper pro positione. Includere debetis popper.min.js ante bootstrap.js vel uti bootstrap.bundle.min.js/ bootstrap.bundle.jsquod continet popperum ut popoveri ad operandum!
  • Popovers tooltip plugin dependentiae require.
  • Popoveri in agendis causis optent, ergo eas te ipsum initialize oportet .
  • Nulla longitudo titleac contentvalores popover numquam ostendent.
  • Specificare container: 'body'ad vitandas difficultates in pluribus componentibus (sicut coetus input coetus, globuli, etc).
  • Felis popovers in occultis elementis non laborabit.
  • Popovers elementum .disabledvel disabledelementum Urguet in wrapper.
  • Cum ex ancoris utitur qui per plures lineas involvunt, popoveri inter latitudinem altiore ancorarum centrum erit. Utere .text-nowraptuo <a>s ad vitandum hunc mores.
  • Popovers occultari debent antequam elementa eorum correspondentia a dom.
  • Popoveri urguere potest propter elementum intra umbram dom.
Defalta, haec pars utitur sanitizer aedificato in contentis, quae exuit aliqua elementa HTML quae explicite non licet. Vide sectionem sanitizer in documentis nostris JavaScript pro magis details.
Effectus animationis huius componentis dependet ex prefers-reduced-motioninterrogatione instrumentorum. Videre motum sectionem accessibilitatis nostrae documentationis reductam .

Legere videas quomodo popovers cum aliquibus exemplis operetur.

Exemplum: Potestatem popovers ubique

Uno modo ut omnes popoveri in pagina initializent eos ex suo data-bs-toggleattributo eligere:

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

Exemplum: Using the containeroption

Cum aliqua genera in parentis elemento popover impediente habeas, morem containerexprimere voles ut popover HTML in loco illo elemento appareat.

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

Exemplum

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

Quattuor directiones

Quattuor optiones praesto sunt: ​​summum, dextrum, fundum, ac sinistrum varius. Directiones speculantur cum per Bootstrap in 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>

Dimitte in proximo click

Felis utere focusut popovers emittat in usoris proximi cliccum alterius elementi quam toggle.

Imprimis markup requiritur ad dimittendum in proximo-click

Ad propriam transversistram et transversis suggestum agendis, <a>tag, non tag, uti debetis, et attributum <button>etiam includere debetis .tabindex

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

Debilitatum elementis

Elementa cum disabledattributo non sunt interactive, utentes significationes non possunt volitare vel preme ea ut popover felis (vel tooltip). Pro habemus, voles ex fasciculo in popover trigger <div>vel <span>, bene uti claviaturae focusable factae tabindex="0".

Pro triggers popover debiles, etiam praeferre data-bs-trigger="hover focus"potes ut popover ut immediata visivae opiniones usoribus tuis appareat, cum in elemento debili strepere non possunt .

<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

Variabilium

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

Consuetudinem

Admitte popovers per JavaScript:

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

Faciens popovers opus est tincidunt et assistive technicae users

Ut tincidunt utentes claviaturos tuos popovers activate, eas tantum addere debes ad HTML elementa quae traditionaliter claviaturae sunt et interactiva (qualia sunt nexus vel forma controllis). Etsi arbitraria HTML elementa (qualia sunt <span>) versari possunt addito tabindex="0"attributo, hoc addet potentia molestissima et confundens tab cessat in elementis non-interacivis pro claviaturis usoribus, et technologiae maxime adiuvativae in hoc casu contentum popoveri nunc non annuntiant. . Accedit, quod popovers tuis felis non confidunt solum hover, cum hoc eis impossibile erit ut felis claviaturis usoribus efficiat.

Dum dives, HTML in popovers per htmloptionem structus, inserere potes, enixe commendamus ut nimiam rerum copiam vitare possis. Via popoveri nunc operandi est quod, semel ostensa, eorum contenta elemento felis cum aria-describedbyattributo ligatur. Quam ob rem, universitas contentorum popoveri nuntiabitur usoribus technologicis adiuvandis ut rivus diu, continuus.

Accedit, dum licet etiam interactivas potestates (qualia elementa vel nexus formare) in popover tuo (addendo his elementis allowListattributorum et tags permissorum), scias nunc popover umbilicum ordinem clavicularium non administrare. Cum usor claviaturae popover aperit, focus manet in elementum excitato, et sicut popover plerumque non statim sequitur felis in structura documenti, nulla est cautio quae progrediendo/pressit.TABusorem claviculi in ipsum popover movebit. In summa, interactivas potestates popoveri simpliciter addendo verisimile est has potestates impossibilis/inutilis reddere pro claviaturis usoribus et usoribus technologiarum adiuvantium, vel saltem ad ordinem umbilici altiore incogniti ad faciendum. In his casibus considera alternis modalibus pro utendo.

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-bs-, ut in data-bs-animation="". Fac mutare casus genus optionis nominis e camelCase ad kebab-casu cum transeundo optiones per data attributa. Exempli gratia, loco data-bs-customClass="beautifier"uteris, uteris data-bs-custom-class="beautifier".

Nota quod propter rationes securitatis sanitize, sanitizeFn, et allowListoptiones non possunt suppeditari usura attributa data.
Nomen Type Default Descriptio
animation Boolean true Applicare css fade transitus ad popover
container string | elementum | falsus false

Ponit popover ad elementum specificum. Exemplum: container: 'body'. Haec optio maxime utilis est in eo quod popover in fluxu tabellae prope excitato elementi te collocare sinit - quae popover ne a emissatione elementi per fenestram resize natare prohibebit.

content string | elementum | officium ''

Default contentus valorem, si data-bs-contentattributum non est praesens.

Si munus detur, vocabitur cum sua thisreferentia ad elementum quod adnexum est popover.

delay numerus | object 0

Mora monstrans et occultans popover (ms) - non applicatur ad genus felis manualem

Si numerus suppleatur, mora adhibenda est ad utrumque corium/show

Objectum structura est:delay: { "show": 500, "hide": 100 }

html Boolean false HTML inseres in popover. Si falsus, innerTextcontenta in possessionem adhibebitur dom. Utere textu si de oppugnationibus XSS sollicitus es.
placement string | officium 'right'

Quomodo positionem popover - auto | top | imo | left | ius.
Cum autospecificatur, dynamice reorient faciet popover.

Cum munus collocationis determinare adhibetur, cum popover dom node ut primum argumentum et elementum nodi domne sicut secundae excitato appellatur. Contextus ad exemplum popoveri thispositum est.

selector string | falsus false Si electrix cautum sit, res popover ad scuta determinata delegabuntur. Re, hoc adhibetur ut dynamica vis HTML contenta popoveri addere possit. Vide hoc et exemplum informativum .
template filum '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Basi HTML uti cum popover creando.

titlePopover in injicietur .popover-header.

contentPopover in injicietur .popover-body.

.popover-arrowsagitta popover fiet.

Extremum elementum fasciculo .popoverclassi debet habere.

title string | elementum | officium ''

Default title valorem si titleattributum non est praesens.

Si munus detur, vocabitur cum sua thisreferentia ad elementum quod adnexum est popover.

trigger filum 'click' Quomodo popover utitur - click | tabernus | focus | manuale. Plures triggers transire potes; eosque spatio. manualnon potest cum aliqua alia felis.
fallbackPlacements ordinata ['top', 'right', 'bottom', 'left'] Define placements fallback providens indices placementorum in ordine (in ordine praepositorum). Pro magis informationes pertinent ad mores Popper soUicitudo
boundary string | elementum 'clippingParents' Superfluum coactionis limitis popoveri (solum applicativum praeventionis Popper's determinationis). Defalta suus 'clippingParents'et HTMLElement referentem (per JavaScript only). For more information refer to Popper's detectOverflow docs .
customClass string | officium ''

Classes ad popoverum adde cum ostenditur. Nota has classes additas esse omnibus generibus in template specificatis. Ad multiplices classes, spatiis eas separa: 'class-1 class-2'.

Munus praeterea praeterire potes quod chorda unica referat quae adiectis nominibus classis continentur.

sanitize Boolean true Admitte vel disable sanitization. Si actum 'template', 'content'et 'title'bene sanitized. See the sanitizer section in our JavaScript documentation .
allowList object Default valorem Id quod continet permissa attributa et tags
sanitizeFn null | officium null Hic tu munus tuum inconsideratus supplere potes. Hoc utile esse potest si bibliotheca dedicata uti mavis sanitizationem praestare.
offset ordinata | string | officium [0, 8]

Offset popover ad suum scopum. Filum transire potes in data attributis cum commate valores separatos similes:data-bs-offset="10,20"

Cum munus cinguli definiendi adhibetur, cum obiecto popperum collocationem, relationem continet, et popper ut primum argumentum corrigit. Nodus domne elementum excitato praecessit ut secundum argumentum. Munus ordinata duobus numeris reddere debet: .[skidding, distance]

For more information refer to Popper's offset docs .

popperConfig null | object | officium null

Mutare Bootstrap default Popper config, vide configurationem Popper .

Cum munus ad configurationem Popper creare adhibetur, cum obiecto dicitur, quod default Popper configurationem Bootstrap continet. Iuvat uteris et defaltam cum propria configuratione confundas. Munus obiecto configurationem reddere debet pro Popper.

Data singulis popovers

Optiones singularum popoverarum per usum attributorum datorum, ut supra dictum est, determinari possunt.

Munus cum usurapopperConfig

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

Methodi

Modi asynchronous et transitus

Omnes API modi asynchroni sunt et transitus committitur . Redeunt ad RECENS mox ut transitus incipiat sed antequam finiatur . Methodus praeterea in transitus transeuntis ignorabitur .

See our JavaScript documentation for more information .

ostende

Elementum aperit popover. RECENS REVERIT ante popover ostensum est (id antequam shown.bs.popoverevenit). Hoc "manuale" excitato popover consideratur. Popoveri cuius titulus et contenta utraque nulla longitudo numquam ostenditur.

myPopover.show()

celare

Cras elementum popover. Redit ad salutatorem ante popover occultatum (id ante hidden.bs.popovereventum). Hoc "manuale" excitato popover consideratur.

myPopover.hide()

toggle

Toggles popover elementum est. RECENS REcurrit antequam popover re vera aut occulta (id est ante eventum shown.bs.popovervel hidden.bs.popoverevenit). Hoc "manuale" excitato popover consideratur.

myPopover.toggle()

dispono

Coria et popover elementi destruit (data removet condita in elementum dom). Popoveri qui delegatione utuntur ( quae selectoroptione utente creantur ) singulariter destrui non possunt in elementis felis descendentibus.

myPopover.dispose()

da "

Elementi popover facultatem demonstrandi dat. Popovers per defaltam possunt.

myPopover.enable()

disable

Facultatem removet popover elementi exhibendi. Popover tantum ostendi poterit si re- parari potest.

myPopover.disable()

toggleEnabled

Toggles facultatem popoveri elementi exhibendi vel occultandi.

myPopover.toggleEnabled()

renovatio

Renovat positionem popover elementi.

myPopover.update()

getInstance

Methodus stabilis, quae te permittit ut instantia popoveri cum elemento domne coniungatur

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

getOrCreateInstance

Ratio static, quae te permittit ut instantia popoveri cum elemento DOM coniungitur, aut novum crea in casu initialised non erat.

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

Events

Genus res Descriptio
show.bs.popover Huius rei accendit statim cum showinstantia methodus appellatur.
shown.bs.popover This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.popover This event is fired immediately when the hide instance method has been called.
hidden.bs.popover This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.popover This event is fired after the show.bs.popover event when the popover template has been added to the DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})