Tooltip
Muestra definiciones y contexto al pasar el cursor. Define términos, explica acrónimos o enlaza a contenido relacionado sin sobrecargar la página.
Añade texto emergente para definir términos, explicar acrónimos o enlazar a páginas relacionadas sin sobrecargar el contenido principal.
Usa Tooltips cuando:
- Definir términos de forma inline sin interrumpir el flujo de lectura
- Explicar acrónimos que algunos lectores pueden no conocer
- Proporcionar contexto que es útil pero no esencial
- Enlazar a contenido relacionado con una llamada a la acción
Tooltip básico
Pasa el cursor sobre APIUn conjunto de protocolos para que las aplicaciones de software se comuniquen. para ver la definición.
<Tooltip tip="A set of protocols for software applications to communicate.">
API
</Tooltip>Con titular
Añade un titular encima del texto del tooltip:
Pasa el cursor sobre APIAPIApplication Programming Interface: un conjunto de protocolos para que las aplicaciones de software se comuniquen. para ver la definición con un titular.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
API
</Tooltip>Con enlace de llamada a la acción
Incluye un enlace para que los usuarios puedan saber más:
Aprende sobre APIsAPIApplication Programming Interface: un conjunto de protocolos para que las aplicaciones de software se comuniquen.Saber más → en nuestra documentación.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols..."
cta="Learn more"
href="/components/overview"
>
API
</Tooltip>Uso inline
Los Tooltips funcionan inline con el texto. Puedes explicar términos de HTMLHyperText Markup Language, CSSCascading Style Sheets o JSJavaScript de forma inline.
Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.Tooltips frente a otros componentes
| Necesidad | Componente |
|---|---|
| Definir un término inline | Tooltip |
| Explicar un concepto en detalle | Expandable o sección separada |
| Advertir sobre algo importante | Callout (Note, Warning) |
| Mostrar código contextual | CodeGroup o código inline |
Regla general: Los Tooltips son para definiciones rápidas (1-2 frases). Las explicaciones más largas pertenecen al contenido principal o a un Expandable.
Props
El texto del tooltip que se muestra al pasar el cursor.
Texto que se muestra encima del tip.
Texto del enlace de llamada a la acción.
URL para la llamada a la acción (requerida con cta).
El texto que activa el tooltip.
Accesibilidad
- Los Tooltips son accesibles mediante teclado (Tab para enfocar, se muestra al enfocar)
- Usa
role="tooltip"para lectores de pantalla - El texto desencadenador tiene un subrayado discontinuo para indicar interactividad