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.js
quod continet popperum ut popoveri ad operandum! - Popovers tooltip plugin dependentiae require.
- Si JavaScript a fonte aedificas, postulat
util.js
. - Popoveri in agendis causis optent, ergo eas te ipsum initialize oportet .
- Nulla longitudo
title
accontent
valores 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
.disabled
veldisabled
elementum Urguet in wrapper. - Cum ex ancoris utitur qui per plures lineas involvunt, popoveri inter latitudinem altiore ancorarum centrum erit. Utere
.text-nowrap
tuo<a>
s ad vitandum hunc mores. - Popovers occultari debent antequam elementa eorum correspondentia a dom.
- Popoveri urguere potest propter elementum intra umbram dom.
prefers-reduced-motion
interrogatione 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-toggle
attributo eligere:
$(function () {
$('[data-toggle="popover"]').popover()
})
Exemplum: Using the container
option
Cum aliqua genera in parentis elemento popover impediente habeas, morem container
exprimere 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="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
Dimitte in proximo click
Felis utere focus
ut 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-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 disabled
attributo non sunt interactive, utentes significationes non possunt volitare vel preme ea ut popover felis (vel tooltip). Ut in habemus, voles ex fasciculo popoveri felis <div>
vel <span>
elementum pointer-events
debilitatum superare.
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)
GPU acceleratio
Popoveri interdum terrere in Fenestra 10 machinas apparent propter accelerationem GPU et systema modificatum DPI. Opus hoc in v4 est accelerationem GPU inactivandi quam necessariam in popovers tuis.
Fix suggesserant:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
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 html
optionem 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-describedby
attributo ligatur. Quam ob rem, universitas contentorum popoveri nuntiabitur usoribus technologicis adiuvandis ut rivus diu, continuus.
Accedit, dum licet etiam interactivas potestates (qualia sunt elementa vel nexus formare) in popover tuo (addendo his elementis whiteList
vel attributis vel tags permissis), scias nunc popover umbilicum ordinem 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-
, ut in data-animation=""
.
sanitize
,
sanitizeFn
et
whiteList
optiones utens attributis data suppleri non possunt .
Nomen | Type | Default | Descriptio |
---|---|---|---|
animatio | Boolean | verum | Applicare css fade transitus ad popover |
continens | string | elementum | falsus | falsus | Ponit popover ad elementum specificum. Exemplum: |
content | string | elementum | officium | ' | Default contentus valorem, si Si munus detur, vocabitur cum sua |
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: |
html | Boolean | falsus | HTML inseres in popover. Si falsus, text methodus 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 munus collocationis determinare adhibetur, cum popover dom node ut primum argumentum et elementum nodi domne sicut secundae excitato appellatur. Contextus ad exemplum popoveri |
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.
Extremum elementum fasciculo |
titulus | string | elementum | officium | ' | Default title valorem si Si munus detur, vocabitur cum sua |
felis | filum | 'click' | Quomodo popover utitur - click | tabernus | focus | manuale. Plures triggers transire potes; eosque spatio. manual non potest cum aliqua alia felis. |
offset | numerus | filum | 0 | Offset popover ad suum scopum. For more information refer to Popper's offset docs . |
fallbackPlacement | string | ordinata | 'flip' | Patitur specificare quam positionem Popper in fallback utatur. Pro magis informationes pertinent ad mores Popper soUicitudo |
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: Munus praeterea praeterire potes quod chorda unica referat quae adiectis nominibus classis continentur. |
terminus | string | elementum | 'scrollParent' | Exundant angustiae limitis popover. Valores 'viewport' , 'window' , 'scrollParent' vel HTMLElement (JavaScript tantum). For more information refer to Popper's preventOverflow docs . |
sanitize | Boolean | verum | Admitte vel disable sanitization. Si actum 'template' , 'content' et 'title' bene sanitized. See the sanitizer section in our JavaScript documentation . |
whiteList | 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. |
popperConfig | null | object | null | Mutare Bootstrap default Popper config, vide configurationem Popper |
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 .
$().popover(options)
Initializes popovers collectione pro elemento.
.popover('show')
Elementum aperit popover. RECENS REVERIT ante popover ostensum est (id antequam shown.bs.popover
evenit). Hoc "manuale" excitato popover consideratur. Popoveri cuius titulus et contenta utraque nulla longitudo numquam ostenditur.
$('#element').popover('show')
.popover('hide')
Cras elementum popover. Redit ad salutatorem ante popover occultatum (id ante hidden.bs.popover
eventum). 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.popover
vel hidden.bs.popover
evenit). Hoc "manuale" excitato popover consideratur.
$('#element').popover('toggle')
.popover('dispose')
Coria et popover elementum destruit. Popoveri qui delegatione utuntur ( quae selector
optione 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 show instantia 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 hide methodus 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.popover eventum accensus est cum popover templates domno additum est. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})