Source

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:

  • Instrumentorum confidere in 3 bibliotheca factio Popper.js pro positione. Includere oportet popper.min.js ante bootstrap.js vel uti bootstrap.bundle.min.js/ bootstrap.bundle.jsquod Popper.js continet ut instrumenta ad operandum!
  • Si JavaScript a fonte aedificas, postulatutil.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 .disabledor disabledelements 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.

Effectus animationis huius componentis dependet ex prefers-reduced-motioninterrogatione 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-toggleattributum eligere:

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

Exempla

Volitant super nexus infra videre tooltips:

Stricta braccas gradum proximum keffiyeh te probabiliter non audisti. Photo booth barba rudis denim letterpress vegan nuntius bag stumptown. Fundus ad mensam seitan, mcsweeney fixie sustineri quinoa 8 frenum americani vestium terry richardson vinyl chambray habent. Barbatus stumptown, cardigans banh mi lomo tonitrui. Tofu biodiesel williamsburg marfa, four loko mcsweeney's mundet vegan chambray. A re ironica artifex quidquid keytar , scenester villarum ad ripas mensae Austin twitter handle freegan cred raw denim single-origin coffee viral.

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 autoetscroll

Tooltip positio automatice mutare conatur cum parens continens noster habet overflow: autovel overflow: scrollsimilis .table-responsive, sed tamen pristinam positionis collocationem servat. Ad solvendum, boundaryoptionem alicui praeter valorem defaltam pone, 'scrollParent', ut 'window':

$('#example').tooltip({ boundary: 'window' })

Markup

Signum requisitum pro instrumenti instrumenti dataattributum est tantum et titlein elementum HTML quod tooltip habere vis. Nota notae generatae instrumenti instrumenti magis simplex est, quamquam positione requirit (per default ad topplugin 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 hoversicut 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 disabledattributo 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="".

Nota quod propter rationes securitatis sanitize, sanitizeFnet whiteListoptiones 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: container: 'body'. Haec optio apprime utilis est in eo quod permittit te positionem instrumenti in fluxu tabellae prope elementum excitato - quod obstabit instrumentum, ne fluitantia ab elemento excitato in fenestra resize.
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:delay: { "show": 500, "hide": 100 }
html Boolean falsus

HTML patitur in tooltip.

Quod si verum est, HTML tags in instrumenti instrumenti ratione in tools titlereddetur. Si falsus, textmethodus adhibebitur ad inserendum contentum in dom.

Utere textu si de oppugnationibus XSS sollicitus es.
collocatione string | officium 'top'

Quomodo positio tooltip - auto | top | imo | left | ius.
Cum autospecificatur, tooltip alacriter reorient.

Cum munus collocationis determinare adhibetur, cum instrumento instrumenti nodi dom nodi appellatur ut argumentum primum et elementum dom nodi excitato ut eius secundae. Contextus thispositus est ad instantiam instrumenti instrumenti.
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.onauxilium). 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 titleinstrumentum in injicietur .tooltip-inner.

.arrowfiet sagitta tooltip est.

Extremum elementum fasciculus debet habere .tooltipgenus et role="tooltip".
titulus string | elementum | officium '

Default title valorem si titleattributum non est praesens.

Si munus detur, vocabitur cum sua thisreferentia ad elementum quod instrumentum adnectitur.
felis filum ' aliquet focus'

Quomodo tooltip utitur - click | tabernus | focus | manuale. Plures triggers transire potes; separare spatium.

'manual'indicat instrumentum ad grammatice per modum .tooltip('show')ac .tooltip('hide')modos .tooltip('toggle')impelli; Hoc valore cum aliqua alia felis componi non potest.

'hover'sponte autem proveniet in instrumentis quae per tincidunt urgueri non possunt, et tantum adhibeantur si alternae rationes ad easdem informationes usorum electronicarum adsunt.
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.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' Effluant angustia instrumenti tooltip. Valores 'viewport', 'window', 'scrollParent'vel HTMLElement (JavaScript tantum). For more information refer to Popper.js's preventOverflow docs .
sanitize Boolean verum Admitte vel disable sanitization. Si activated 'template'et 'title'bene sanitized erit.
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 Ad Bootstrap mutare default Popper.js config, vide configurationem Popper.js

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 .

See our JavaScript documentation for more information .

$().tooltip(options)

Applicat tooltip tracto ad collectionem elementi.

.tooltip('show')

Elementum demonstrat tooltip. RECENS prius redit ad instrumentum demonstratum (id est antequam shown.bs.tooltipevenit). 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.tooltipevenit). 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.tooltipvel hidden.bs.tooltipeventum). Hoc habetur "manual" excitato instrumenti instrumenti.

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

.tooltip('dispose')

Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

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

.tooltip('enable')

Gives an element’s tooltip the ability to be shown. Tooltips are enabled by default.

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

.tooltip('disable')

Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.

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

.tooltip('toggleEnabled')

Toggles the ability for an element’s tooltip to be shown or hidden.

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

.tooltip('update')

Updates the position of an element’s tooltip.

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

Events

Event Type Description
show.bs.tooltip This event fires immediately when the show instance method is called.
shown.bs.tooltip This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.tooltip Hic eventus statim accensus est, cum hidemethodus 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.tooltipcum instrumentum tabulae instrumentorum ad dom additum est. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})