Tooltips

En tooltip es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Playground

Posición tooltip

arribaderechaabajoizquierda

Cambiar texto

Ruby

<%= btn_primary 'Label', title: 'tooltip on top', data: { toggle: 'tooltip', placement: :top } %>
                

Html

<button
  className='btn btn-primary'
  id='btn-tooltip'
  data-toggle="tooltip"
  data-placement='top'
  title='tooltip on top'
>
  tooltip on top
</button>
                

Groovy

<g:tooltipComponent
      id=""
      class=""
      title="tooltip on top"
      placement="top"
      trigger="hover"
      size="auto"
>
  <button>Hover para tooltip</button>
</g:tooltipComponent>
                

Lista de parámetros

Ruby

Parámetro

Tipo

Detalle

placement	String	Determina como posicionar el tooltip, cuando el parámetro es auto ser reorienta el tooltip de forma automática
title	String	Texto que se mostrará en contenido de tooltip
html	Boolean	Determina si el contenido permite tags HTML

Groovy

Parámetro

Tipo

Detalle

id	String	Determina el ID dentro del DOM del componente
class	String	Determina el CLASS dentro del DOM del componente
title	String	Texto que se mostrará en contenido de tooltip
placement	top | bottom | right | left	Determina como posicionar el tooltip
trigger	hover | click	Determina que acción es necesaria para mostrar el tooltip
icon	boolean	Determina si se mostrará o no el icono
size	auto | lg	El tamaño del tooltip
container	false	El contenedor del tooltip
isHtml	false	El contenido del tooltip es html

Anatomía

1. Contenedor

Contenedor principal del contenido.

2. Body

Texto para acompañar un elemento, contenido flexible.

3. Flecha indicadora

Puede utilizarse en: top, right, bottom, left.

Casos de uso

Use tooltips para identificar o agregar una pequeña cantidad de información a un elemento. Por lo general, la información sobre herramientas se utiliza para:

• Ayudar a los usuarios a comprender el significado o el propósito de los íconos.
• Mostrar la versión completa del texto truncado.
• Mostrar el texto alternativo para una imagen.
• Indicar una breve explicación sobre por qué un radio-button o checkbox está deshabilitado.