---
title: Tooltip
description: 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 <Tooltip tip="Un conjunto de protocolos para que las aplicaciones de software se comuniquen.">API</Tooltip> para ver la definición.

```jsx
<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 <Tooltip headline="API" tip="Application Programming Interface: un conjunto de protocolos para que las aplicaciones de software se comuniquen.">API</Tooltip> para ver la definición con un titular.

```jsx
<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 <Tooltip headline="API" tip="Application Programming Interface: un conjunto de protocolos para que las aplicaciones de software se comuniquen." cta="Saber más" href="/es/components/overview">APIs</Tooltip> en nuestra documentación.

```jsx
<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 <Tooltip tip="HyperText Markup Language">HTML</Tooltip>, <Tooltip tip="Cascading Style Sheets">CSS</Tooltip> o <Tooltip tip="JavaScript">JS</Tooltip> de forma inline.

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

<ParamField name="tip" type="string" required>
  El texto del tooltip que se muestra al pasar el cursor.
</ParamField>

<ParamField name="headline" type="string">
  Texto que se muestra encima del tip.
</ParamField>

<ParamField name="cta" type="string">
  Texto del enlace de llamada a la acción.
</ParamField>

<ParamField name="href" type="string">
  URL para la llamada a la acción (requerida con `cta`).
</ParamField>

<ParamField name="children" type="ReactNode">
  El texto que activa el tooltip.
</ParamField>

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

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Resumen de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>