Source

Consells d'eines

Documentació i exemples per afegir consells d'eines d'arrencada personalitzats amb CSS i JavaScript mitjançant CSS3 per a animacions i atributs de dades per a l'emmagatzematge de títols locals.

Visió general

Coses a saber quan s'utilitza el connector d'informació eines:

  • Els consells sobre eines depenen de la biblioteca de tercers Popper.js per al posicionament. Heu d'incloure popper.min.js abans de bootstrap.js o utilitzar bootstrap.bundle.min.js/ bootstrap.bundle.jsque conté Popper.js perquè funcionin les instruccions.
  • Si esteu creant el nostre JavaScript des de la font, requereixutil.js .
  • Els consells sobre eines estan activats per raons de rendiment, de manera que els heu d'inicialitzar vosaltres mateixos .
  • Els consells sobre eines amb títols de longitud zero no es mostren mai.
  • Especifiqueu container: 'body'per evitar problemes de renderització en components més complexos (com els nostres grups d'entrada, grups de botons, etc.).
  • No funcionarà l'activació de suggeriments sobre elements ocults.
  • Els consells sobre eines per a elements .disabledo disableds'han d'activar en un element d'embolcall.
  • Quan s'activa des d'hiperenllaços que abasten diverses línies, els consells sobre eines es centraran. Utilitzeu white-space: nowrap;-lo <a>per evitar aquest comportament.
  • Els consells sobre eines s'han d'amagar abans que els seus elements corresponents s'hagin eliminat del DOM.
  • Els tooltips es poden activar gràcies a un element dins d'un DOM ombra.

L'efecte d'animació d'aquest component depèn de la prefers-reduced-motionconsulta de mitjans. Consulteu la secció de moviment reduït de la nostra documentació d'accessibilitat .

Tens tot això? Genial, anem a veure com funcionen amb alguns exemples.

Exemple: activeu els consells d'eines a tot arreu

Una manera d'iniciar tots els consells d'eines d'una pàgina seria seleccionar-los pel seu data-toggleatribut:

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

Exemples

Passeu el cursor per sobre dels enllaços següents per veure els consells sobre eines:

Pantalons ajustats keffiyeh del següent nivell , probablement no n'hagueu sentit a parlar. Photo Booth barba denim cru tipografia bossa de missatgeria vegana stumptown. Seitan de granja a taula, la roba americana de quinoa sostenible de 8 bits fixie de mcsweeney té un cambray de vinil terry richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodièsel williamsburg marfa, quatre loko mcsweeney's cleanse vegan chambray. Un artesà realment irònic , sigui quin sigui el keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim cafè d'origen únic viral.

Passeu el cursor per sobre dels botons de sota per veure les quatre indicacions d'eines: superior, dreta, inferior i esquerra.

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

I amb HTML personalitzat afegit:

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

Ús

El connector d'informació sobre eines genera contingut i marques sota demanda i, per defecte, col·loca els consells sobre eines després del seu element activador.

Activa la informació sobre eines mitjançant JavaScript:

$('#example').tooltip(options)
Desbordament autoiscroll

La posició de la informació sobre eines intenta canviar automàticament quan un contenidor principal té overflow: autoo overflow: scrollagrada el nostre .table-responsive, però encara manté la posició de la ubicació original. Per resoldre'l, configureu l' boundaryopció amb qualsevol cosa que no sigui el valor predeterminat 'scrollParent', com ara 'window':

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

Marcatge

L'etiquetatge necessari per a una informació sobre eines és només un dataatribut i titlea l'element HTML voleu tenir una informació sobre eines. El marcatge generat d'una informació sobre eines és bastant senzill, tot i que requereix una posició (per defecte, establerta toppel connector).

Fer que els consells d'eines funcionin per als usuaris de teclat i tecnologia d'assistència

Només hauríeu d'afegir consells sobre eines als elements HTML que tradicionalment són interactius i enfocats al teclat (com ara enllaços o controls de formulari). Tot i que els elements HTML arbitraris (com ara <span>s) es poden enfocar afegint l' tabindex="0"atribut, això afegirà tabulacions potencialment molestes i confuses en elements no interactius per als usuaris del teclat. A més, la majoria de tecnologies d'assistència actualment no anuncien la informació sobre eines en aquesta situació.

A més, no us confieu únicament hovercom a activador de la vostra informació sobre eines, ja que això farà que els vostres consells sobre eines siguin impossibles d'activar per als usuaris del teclat.

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

Elements inhabilitats

Els elements amb l' disabledatribut no són interactius, és a dir, els usuaris no poden centrar-hi, passar el cursor o fer-hi clic per activar una informació emergent (o una finestra emergent). Com a solució alternativa, voldreu activar la informació sobre eines des d'un embolcall <div>o <span>, idealment enfocat al teclat amb tabindex="0", i anul·lar l' pointer-eventselement desactivat.

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-animation="".

Tingueu en compte que, per raons de seguretat, les opcions sanitize, sanitizeFni whiteListno es poden proporcionar mitjançant atributs de dades.

Nom Tipus Per defecte Descripció
animació booleà veritat Apliqueu una transició d'esvaïment CSS a la informació sobre eines
contenidor cadena | element | fals fals

Afegeix la informació sobre eines a un element específic. Exemple: container: 'body'. Aquesta opció és especialment útil perquè us permet situar la informació sobre eines en el flux del document a prop de l'element activador, cosa que evitarà que la informació sobre eines surti de l'element activador durant un canvi de mida de la finestra.
retard nombre | objecte 0

Retard per mostrar i amagar la informació sobre eines (ms): no s'aplica al tipus d'activador manual

Si es proporciona un número, s'aplica un retard tant per ocultar com per mostrar

L'estructura de l'objecte és:delay: { "show": 500, "hide": 100 }
html booleà fals

Permet HTML a la informació sobre eines.

Si és cert, les etiquetes HTML de la informació sobre eines es titlemostraran a la informació sobre eines. Si és fals, texts'utilitzarà el mètode de jQuery per inserir contingut al DOM.

Use text if you're worried about XSS attacks.
placement string | function 'top'

How to position the tooltip - auto | top | bottom | left | right.
When auto is specified, it will dynamically reorient the tooltip.

When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance.
selector string | false false If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (jQuery.on support). See this and an informative example.
template string '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML to use when creating the tooltip.

The tooltip's title will be injected into the .tooltip-inner.

.arrow will become the tooltip's arrow.

The outermost wrapper element should have the .tooltip class and role="tooltip".
title string | element | function ''

Default title value if title attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the tooltip is attached to.
trigger string 'hover focus'

How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.

'manual' indicates that the tooltip will be triggered programmatically via the .tooltip('show'), .tooltip('hide') and .tooltip('toggle') methods; this value cannot be combined with any other trigger.

'hover' on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.
offset number | string | function 0

Offset of the tooltip relative to its target.

When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.

For more information refer to Popper.js's offset docs.
fallbackPlacement string | array 'flip' Allow to specify which position Popper will use on fallback. For more information refer to Popper.js's behavior docs
boundary string | element 'scrollParent' Overflow constraint boundary of the tooltip. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
sanitize boolean true Enable or disable the sanitization. If activated 'template' and 'title' options will be sanitized.
whiteList object Default value Object which contains allowed attributes and tags
sanitizeFn null | function null Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.

Data attributes for individual tooltips

Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.

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

.tooltip('hide')

Hides an element’s tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.

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

.tooltip('toggle')

Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the shown.bs.tooltip or hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.

$('#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 This event is fired immediately when the hide instance method has been called.
hidden.bs.tooltip This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.tooltip Aquest esdeveniment s'activa després de l' show.bs.tooltipesdeveniment quan s'ha afegit la plantilla d'informació eines al DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})