Source

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 innititur 3 factionis bibliothecae Popper.js pro positione. Includere debetis popper.min.js ante bootstrap.js vel uti bootstrap.bundle.min.js/ bootstrap.bundle.jsquod continet Popper.js ut popoveri ad operandum!
  • Popovers tooltip plugin dependentiae require.
  • Si JavaScript a fonte aedificas, postulatutil.js .
  • 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 ancorarum altiore centrum erit. Utere .text-nowraptuo <a>s ad vitandum hunc mores.
  • Popovers occultari debent antequam elementa eorum correspondentia a dom.

Legere videas quomodo popovers cum aliquibus exemplis operetur.

Exemplum: Potestatem popovers ubique

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

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

Exemplum: Using the containeroption

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

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

Exemplum

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

Quattuor directiones

Quattuor optiones praesto sunt: ​​summum, dextrum, fundum, ac sinistrum varius.

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

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

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

Debilitatum elementis

Elementa cum disabledattributo non sunt interactive, utentes significationes non possunt volitare vel preme ea ut popover felis (vel tooltip). Ut habemus, voles popover ex fasciculo trigger vel <div>elementum debilitatum vinces.<span>pointer-events

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

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

Consuetudinem

Admitte popovers per JavaScript:

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

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-, ut in data-animation="".

Nomen Type Default Descriptio
animatio Boolean verum Applicare css fade transitus ad popover
continens string | elementum | falsus falsus

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-contentattributum non est praesens.

Si munus detur, vocabitur cum sua thisreferentia ad elementum quod adnexum est popover.
mora 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 falsus HTML inseres in popover. Si falsus, textmethodus adhibebitur ad inserendum contentum in dom. Utere textu si de oppugnationibus XSS sollicitus es.
collocatione string | officium 'dextra'

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.
electrix string | falsus falsus 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="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.

.arrowsagitta popover fiet.

Extremum elementum fasciculo .popoverclassi debet habere.
titulus string | elementum | officium '

Default title valorem si titleattributum non est praesens.

Si munus detur, vocabitur cum sua thisreferentia ad elementum quod adnexum est popover.
felis filum 'click' Quomodo popover utitur - click | tabernus | focus | manuale. Plures triggers transire potes; separare spatium. manualnon potest cum aliqua alia felis.
offset numerus | filum 0 Offset popover ad suum scopum. For more information refer to Popper.js's offset docs .
fallbackPlacement string | ordinata 'flip' Patitur specificare quam positionem Popper in fallback utatur. Pro maiori notitia refertur ad Popper.js mores docs
terminus string | elementum 'scrollParent' Exundant angustiae limitis popover. Valores 'viewport', 'window', 'scrollParent'vel HTMLElement (JavaScript tantum). For more information refer to Popper.js's preventOverflow docs .

Data singulis popovers

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

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 .

Videre documenta nostra JavaScript pro magis notitia.

$().popover(options)

Initializes popovers collectione pro elemento.

.popover('show')

Elementum aperit popover. RECENS REVERIT ante popover ostensum est (id antequam shown.bs.popoverevenit). Hoc "manuale" excitato popover consideratur. Popoveri quorum tam titulus quam res nulla sunt, nulla longitudo numquam ostenditur.

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

.popover('hide')

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

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

.popover('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.

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

.popover('dispose')

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

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

.popover('enable')

Elementi popover facultatem demonstrandi dat. Popovers per defaltam possunt.

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

.popover('disable')

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

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

.popover('toggleEnabled')

Toggles facultatem popoveri elementi exhibendi vel occultandi.

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

.popover('update')

Renovat positionem popover elementi.

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

Events

Event Type Descriptio
show.bs.popover Huius rei accendit statim cum showinstantia methodus appellatur.
shown.bs.popover Eventus hic accensus est cum popover utenti utenti factus est (exspectabit CSS transitus ad perficiendum).
hide.bs.popover Hic eventus statim accensus est, cum hidemethodus instantia vocata est.
hidden.bs.popover Eventus hic accensus est cum popover ab usore celatum absolvit (exspectabit CSS transitus ad perficiendum).
inserted.bs.popover Hic eventus post show.bs.popovereventum accensus est cum popover templates domno additum est. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})