Instrumentorum
Documenta et exempla ad consuetudinem Bootstrap instrumentorum addendi cum CSS et JavaScript utens CSS3 pro animationibus et data-attributis pro repositione titulo locali.
Overview
Res cognoscendi cum usura tooltip plugin est:
- Tooltips innituntur 3 factionis bibliothecae Popper pro positione. Includere debetis popper.min.js ante bootstrap.js vel uti
bootstrap.bundle.min.js
/bootstrap.bundle.js
quod continet Popper ut instrumenta ad operandum! - Si JavaScript a fonte aedificas, postulat
util.js
. - Tooltips optet-in causis faciendis, ergo eas te ipsum initialize oportet .
- Instrumenta cum titulis zerum-longitudo numquam ostentantur.
- Specificare
container: 'body'
ad vitandas difficultates in pluribus componentibus (sicut coetus input coetus, globuli, etc). - Instrumentorum occultorum in elementis felis non laborabit.
- Tooltips for
.disabled
ordisabled
elements must be Urguet in wrapper elementum. - Cum ex hyperlinks utitur qui plures lineas spatiantur, instrumenta media centra erunt. Utere
white-space: nowrap;
tuo<a>
s ad vitandum hunc mores. - Instrumenta celari debent antequam elementa eorum correspondentia a dom.
- Instrumenta possunt agere per elementum intra umbram dom.
prefers-reduced-motion
interrogatione instrumentorum. Videre
motum sectionem accessibilitatis nostrae documentationis reductam .
Possedi omnia qua? Magna, videamus quomodo aliquibus exemplis operentur.
Exemplum: Admitte tooltips ubique
Uno modo ut omnia instrumenta in pagina initializent eas per data-toggle
attributum eligere:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Exempla
Volitant super nexus infra videre tooltips:
Placeholder textum ad demonstrandum nonnullos nexus inlineos cum instrumentis instrumentorum communicationis socialis. Nunc id consectetur justo, nec tincidunt nulla. Contentus hic positus est iustus ad imitandum praesentiam textus reali . Et omnia quae iusta tibi dant ideam quomodo instrumenta spectarent cum in adiunctis realibus mundi adhibitis. Ita spe iam vidisti quomodo instrumenta illa in nexus in praxi laborare possint, semel in situ tuo vel incepto uteris.
Volitant infra tesserae quattuor instrumentorum directiones: summum, dextrum, fundum, et sinistrum.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Et cum consuetudine HTML additur:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Consuetudinem
Instrumentum plugin contentum et signum in demanda generat, et per default loca instrumenta post elementum felis suum.
Tooltip Trigger per JavaScript:
$('#example').tooltip(options)
Redundant auto
etscroll
Tooltip positio automatice mutare conatur cum parens continens noster habet overflow: auto
vel overflow: scroll
similis .table-responsive
, sed tamen pristinam positionis collocationem servat. Ad solvendum, boundary
optionem alicui praeter valorem defaltam pone, 'scrollParent'
, ut 'window'
:
$('#example').tooltip({ boundary: 'window' })
Markup
Signum requisitum pro instrumenti instrumenti data
attributum est tantum et title
in elementum HTML quod tooltip habere vis. Nota notae generatae instrumenti instrumenti magis simplex est, quamquam positione requirit (per default ad top
plugin positam).
Faciens tooltips operandi tincidunt et assistive technicae users
Instrumenta instrumenta ad HTML tantum addere debes, quae tradita sunt claviaturae focus et interactiva (qualia sunt nexus vel forma controllis). Etsi arbitraria HTML elementa (sicut <span>
s) umbilici effici possunt addito tabindex="0"
attributo, hoc potentia molestus et turbans tab sistit in elementis non-interacivis pro claviaturis usoribus, et technologiae adiuvativae in hoc situ instrumentorum nunc maxime non annuntiant. Accedite, nolite inniti solum hover
sicut felis pro instrumento tuo, sicut hoc faciet instrumenta tua impossibilia ad trigger pro claviaturis usoribus.
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Debilitatum elementis
Elementa cum disabled
attributo non sunt interactive, utentes significationes non possunt focus, tabernus, vel preme eas ut tooltip trigger (vel popover). Cum habemus, voles e fascia instrumentum felis felis <div>
vel <span>
, bene utens claviaturae posito tabindex="0"
, ac debilem elementum delendi pointer-events
.
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
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 cecidimus transitus ad tooltip |
continens | string | elementum | falsus | falsus | Adhibet tooltip ad elementum specificum. Exemplum: |
mora | numerus | object | 0 | Mora monstrans et occultans tooltip (ms) - non applicatur ad genus felis manualem Si numerus suppleatur, mora adhibenda est ad utrumque corium/show Objectum structura est: |
html | Boolean | falsus | HTML patitur in tooltip. Quod si verum est, HTML tags in instrumenti instrumenti ratione in tools Utere textu si de oppugnationibus XSS sollicitus es. |
collocatione | string | officium | 'top' | Quomodo positio tooltip - auto | top | imo | left | ius. Cum munus collocationis determinare adhibetur, cum instrumento instrumenti nodi dom nodi appellatur ut argumentum primum et elementum dom nodi excitato ut eius secundae. Contextus |
electrix | string | falsus | falsus | Si electrix cautum est, instrumenta instrumentorum ad certa scuta delegabuntur. Re, hoc etiam instrumenta instrumenta ad dom elementa dynamice addita applicare ( jQuery.on auxilium). Vide hoc et exemplum informativum . |
template | filum | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Basi HTML uti, cum tooltip creandi. Instrumentum
Extremum elementum fasciculus debet habere |
titulus | string | elementum | officium | ' | Default title valorem si Si munus detur, vocabitur cum sua |
felis | filum | ' aliquet focus' | Quomodo tooltip utitur - click | tabernus | focus | manuale. Plures triggers transire potes; separare spatium.
|
offset | numerus | string | officium | 0 | Offset tooltip relativum ad scopum suum. Cum functio cinguli ad determinandum adhibetur, dicitur cum obiecto in quo primum argumentum cinguli continetur. Munus cum eadem structura reddere debet. Nodus domne elementum excitato praecessit ut secundum argumentum. 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 tooltip addere monstratur. 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' | Effluant angustia instrumenti tooltip. 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 activated 'template' et 'title' bene sanitized erit. 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 tooltips tribuit
Optiones singulorum instrumentorum per usum attributorum datorum, ut supra dictum est, specificari 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 .
$().tooltip(options)
Applicat tooltip tracto ad collectionem elementi.
.tooltip('show')
Elementum demonstrat tooltip. RECENS prius redit ad instrumentum demonstratum (id est antequam shown.bs.tooltip
evenit). Hoc habetur "manual" excitato instrumenti instrumenti. Instrumenta cum titulis zerum-longitudo numquam ostentantur.
$('#element').tooltip('show')
.tooltip('hide')
Instrumentum elementum celat. Redit ad RECENS antequam tooltip re vera absconditum (id est antequam hidden.bs.tooltip
evenit). Hoc habetur "manual" excitato instrumenti instrumenti.
$('#element').tooltip('hide')
.tooltip('toggle')
Toggles tooltip elementum est. RECENS redit ad instrumentum ante demonstratum vel absconditum (id est ante shown.bs.tooltip
vel hidden.bs.tooltip
eventum). Hoc habetur "manual" excitato instrumenti instrumenti.
$('#element').tooltip('toggle')
.tooltip('dispose')
Celat et destruit tooltip elementum. Instrumenta delegationis quae utuntur (quae optione utente creantur ) selector
singulariter destrui non possunt in elementis felis descendentibus.
$('#element').tooltip('dispose')
.tooltip('enable')
Instrumentum instrumentum elementi facultatem demonstrandi dat. Instrumenta per defaltam possunt.
$('#element').tooltip('enable')
.tooltip('disable')
Facultatem removet instrumentum ad ostensionem elementi. Instrumentum instrumentum tantum demonstrari poterit si re-paratur.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Toggles facultatem instrumenti elementi exhibendi vel absconditi.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Renovat locum tooltip elementi.
$('#element').tooltip('update')
Events
Event Type | Descriptio |
---|---|
show.bs.tooltip | Huius rei accendit statim cum show instantia methodus appellatur. |
shown.bs.tooltip | Eventus hic accensus est cum tooltip usoris visibile est (exspectabit CSS transitus ad perficiendum). |
hide.bs.tooltip | Hic eventus statim accensus est, cum hide methodus instantia vocata est. |
hidden.bs.tooltip | Eventus hic accensus est cum tooltip occultatum ab usore complevit (exspectabit CSS transitus ad perficiendum). |
inserted.bs.tooltip | Hic eventus post eventum accensus est show.bs.tooltip cum instrumentum tabulae instrumentorum ad dom additum est. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})