Tooltip
Permite mostrar un texto de ayuda breve sobre un elemento al pasar el cursor sobre él, sin requerir una interacción adicional.
- Explicar un ícono de ayuda en un formulario: aclarar el efecto de una opción que no resulta evidente por su label. Ej.: "Al activar esta opción, el descuento se aplica incluso a productos que ya tienen precio promocional.".
- Justificar por qué una acción está deshabilitada: informar el motivo puntual por el que un control no se puede usar en ese momento. Ej.: "No es posible editar esta venta porque tiene contracargos activos.".
- Mostrar el valor completo de un texto truncado: revelar el contenido íntegro de una celda o un label que no entra en el espacio disponible. Ej.: el estado completo de un pedido cuando el texto se corta con puntos suspensivos en una tabla.
- Aclarar la acción de un ícono sin texto visible: reforzar qué hace un IconButton cuando el ícono por sí solo puede ser ambiguo. Ej.: "Eliminar".
- Mostrar acciones o contenido interactivo: una caja flotante con opciones para elegir o ejecutar. En su lugar, usar Popover. Ej.: un menú de "Editar", "Duplicar" y "Eliminar".
- Comunicar información imprescindible para completar una tarea: el Tooltip depende del cursor y no está garantizado en todos los dispositivos, por lo que no debe ser el único medio para algo esencial. En su lugar, usar Alert. Ej.: una restricción que impide guardar el formulario.
- Señalar un error de validación de un campo puntual: el mensaje debe quedar junto al campo que lo origina, visible sin depender del cursor. En su lugar, usar el estado de error del Input.
- Confirmar que una acción se ejecutó correctamente: avisar sobre el resultado de una acción recién realizada, como copiar un valor al portapapeles. En su lugar, usar Toast. Ej.: "Texto copiado".
Eliminar
- Surface: el fondo oscuro y el borde redondeado de la caja flotante; usa el token neutral-textHigh, con un color de contraste inverso al del resto de la interfaz.
- Text: el mensaje de ayuda que se muestra dentro de la caja, definido por la prop content.
- Arrow: indicador opcional que apunta al disparador para reforzar el vínculo entre ambos; se activa con arrow (oculto por defecto).
Top
Top: la caja aparece arriba del disparador. Usar cuando el espacio debajo es limitado, como en la última fila de una tabla.
Bottom
Bottom (valor por defecto): la caja aparece debajo del disparador. Es la posición más frecuente para íconos de ayuda en formularios.
Left
Left: la caja aparece a la izquierda del disparador. Usar cuando el contenido a la derecha no debe tapar otro elemento.
Right
Right: la caja aparece a la derecha del disparador. Es habitual junto a un ícono de ayuda alineado al final de un label.
Sin flecha
Sin flecha (valor por defecto): la caja no lleva indicador; alcanza cuando el disparador está cerca y el vínculo ya es evidente.
Con flecha
Con flecha (arrow={true}): refuerza el vínculo entre la caja y el disparador. Usar cuando hay más de un elemento cerca y conviene dejar en claro a cuál corresponde.
El Tooltip aparece junto a un disparador puntual —un ícono de ayuda, un texto truncado o un control deshabilitado— nunca como elemento aislado. El disparador más frecuente es un ícono de ayuda (InfoCircleIcon o QuestionCircleIcon) al lado del label de un campo, dentro de un formulario.
Frecuencia de cobro
Indica el intervalo en días entre cada cobro.
Como la interacción depende del cursor, en dispositivos táctiles no está garantizada: quien navega solo con el dedo puede no llegar a activarla. Por eso, la información del Tooltip nunca debe ser la única fuente de un dato esencial para completar la tarea.
Precio visible
Si no tiene precio promocional, se usa el precio original.
Reservar el Tooltip para un texto de ayuda breve y de una sola línea.
Precio visible
Si el producto no tiene un precio promocional definido a nivel de variante ni a nivel de kit, el sistema toma como referencia el precio original configurado en la ficha del producto.
Evitar párrafos largos o contenido con varias líneas: para eso, usar Popover.
Notificaciones
Aclarar la acción de un IconButton cuando el ícono por sí solo puede ser ambiguo.
Texto copiado
Evitar usar el Tooltip para confirmar una acción recién ejecutada, como "Texto copiado": para ese feedback, usar Toast.
- Interacción basada en cursor: el Tooltip se muestra al pasar el cursor sobre el disparador; no cuenta con una interacción propia por clic o tap. Como esta interacción depende del mouse, no debe ser el único medio para comunicar información imprescindible, en especial en dispositivos táctiles.
- No se abre al enfocar con teclado: a diferencia de otros componentes flotantes, el Tooltip no se activa al recorrer la pantalla con Tab. Evitar apoyarse en él como única fuente de un dato necesario para navegar por teclado.
- Disparador como elemento con su propio significado: cuando el disparador es un ícono sin texto (IconButton, ícono de ayuda), agregarle su propia etiqueta accesible (aria-label); el Tooltip refuerza el contenido, no lo reemplaza.
- Contraste del mensaje: el fondo oscuro (neutral-textHigh) y el texto claro (neutral-background) ya cumplen el contraste mínimo; no sobrescribir esos colores con estilos propios.
Puntuación: con punto final siempre, incluso en frases cortas.
Capitalización: sentence case.
Longitud: máximo 1-2 oraciones. Si el contenido necesita más desarrollo, usar otro componente.
Forma verbal: preferir la frase nominal cuando el verbo está implícito en el contexto. El verbo aparece solo cuando, sin él, no se entiende la acción. Por ejemplo, junto a un filtro de ventas, usar "Ventas del último mes" en lugar de "Muestra las ventas del último mes", porque el verbo es redundante.
Sin imperativo, sin acciones ni links dentro del Tooltip.
Tono: neutro y conciso, sin lenguaje de marketing.
| Disparador | Fórmula | Ejemplo |
|---|---|---|
Elemento sin texto visible (icon button, ícono informativo) | Frase nominal que describe la acción o el elemento | "Edición de producto." |
Término conocido que necesita contexto de beneficio | Por qué es relevante para el usuario, no su definición | "Permite mostrar tus productos en Google gratis." |
Término complejo o desconocido | Qué significa, en lenguaje simple | "Los campos personalizados permiten agregar información extra a tus productos." |
Restricción de plan no evidente | Qué requiere el plan | "Disponible en plan [nombre de plan]." |
| Caso | Qué hacer |
|---|---|
La información es necesaria para completar la acción | No usar Tooltip. Mover el contenido a un help text o a la pantalla principal. |
El texto supera las 2 oraciones | No usar Tooltip. Usar el helper text de Form Field (en contexto de formulario) o un Alert neutral. |
El Tooltip repite lo que ya dice el label del elemento | Eliminar el Tooltip: no agrega información. |
Icon button sin texto | El Tooltip es opcional pero recomendado; el aria-label es siempre obligatorio. |
Instalá el componente vía terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Box, Icon, Tooltip } from "@nimbus-ds/components";
import { InfoCircleIcon } from "@nimbus-ds/icons";
const Example: React.FC = () => (
<Box display="flex" justifyContent="center">
<Tooltip content="Indica el intervalo en días entre cada cobro.">
<Icon color="neutral-textLow" source={<InfoCircleIcon />} />
</Tooltip>
</Box>
);
export default Example;Las propiedades adicionales se pasan al elemento <Tooltip>. Consultá la documentación del elemento div para ver la lista de atributos aceptados.
- Popover — Para mostrar acciones o contenido con más de una línea, anclado a un disparador.
- Alert — Para comunicar información persistente que no debe depender de una interacción con el cursor.
- Icon button — Disparador frecuente del Tooltip cuando la acción se representa solo con un ícono.
- Toast — Para confirmar el resultado de una acción recién ejecutada, en lugar de mostrarlo en un Tooltip.
Tooltip
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | An HTML element, or a function that returns one. It's used to set the position of the tooltip. | |
content* | string | The text that should appear in the tooltip message. | |
arrow | boolean | 'false' | Conditional for displaying the popover arrow. |
position | 'bottom' | 'bottom' | Position of the popover. |
maxWidth | string | The maxWidth property specifies the maximum width of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.