Tooltip

Los tooltips muestran texto informativo cuando los usuarios pasan el cursor, enfocan o tocan un elemento.

Cuando se activan, los tooltips muestran una etiqueta de texto que identifica un elemento, como una descripción de su función.

Tooltip básico

Tooltips posicionados

El componente Tooltip tiene 12 opciones de ubicación. No tienen flechas direccionales; en su lugar, dependen del movimiento que emana desde la fuente para indicar la dirección.

Personalización

Aquí hay algunos ejemplos de cómo personalizar el componente. Puedes obtener más información en la página de documentación sobre personalización.

Tooltips con flecha

Puedes usar la prop arrow para agregar una flecha al tooltip que indique el elemento al que hace referencia.

Distancia desde el anclaje

Para ajustar la distancia entre el tooltip y su elemento anclado, puedes usar la prop slotProps para modificar el offset del popper.

Alternativamente, puedes usar la prop slotProps para personalizar el margen del popper.

Elemento hijo personalizado

El tooltip necesita aplicar listeners de eventos del DOM a su elemento hijo. Si el hijo es un elemento personalizado de React, debes asegurarte de que propague sus props al elemento DOM subyacente.

const MiComponente = React.forwardRef(function MiComponente(props, ref) {
  // Distribuye los props al elemento DOM subyacente.
  return (
    <div {...props} ref={ref}>
      Papelera
    </div>
  );
});

// ...

<Tooltip title="Eliminar">
  <MiComponente />
</Tooltip>;

Si usas un componente de clase como hijo, también debes asegurarte de que la ref se reenvíe al elemento DOM subyacente. (Una ref al componente de clase en sí no funcionará).

class MiComponente extends React.Component {
  render() {
    const { innerRef, ...props } = this.props;
    // Distribuye los props al elemento DOM subyacente.
    return (
      <div {...props} ref={innerRef}>
        Papelera
      </div>
    );
  }
}

// Envolver MiComponente para reenviar la ref como espera Tooltip
const WrappedMiComponente = React.forwardRef(function WrappedMyComponent(props, ref) {
  return <MiComponente {...props} innerRef={ref} />;
});

// ...

<Tooltip title="Eliminar">
  <WrappedMiComponente />
</Tooltip>;

Disparadores

Puedes definir los tipos de eventos que activan la visualización de un tooltip.

La acción táctil requiere una pulsación prolongada debido a que la prop enterTouchDelay está establecida en 700ms por defecto.

Tooltips controlados

Puedes usar las props open, onOpen y onClose para controlar el comportamiento del tooltip.

Ancho variable

El Tooltip ajusta el texto largo de forma predeterminada para hacerlo legible.

Interactivo

Los tooltips son interactivos por defecto (para cumplir con el criterio de éxito 1.4.13 de WCAG 2.1 (Inglés)). No se cerrará cuando el usuario pase el cursor sobre el tooltip antes de que expire el leaveDelay. Puedes desactivar este comportamiento (lo que incumpliría el criterio de éxito requerido para alcanzar el nivel AA) pasando la prop disableInteractive.

Elementos deshabilitados

Por defecto, los elementos deshabilitados como <button> no activan interacciones del usuario, por lo que un Tooltip no se activará con eventos normales como el hover. Para solucionar esto, agrega un elemento contenedor simple, como un span.

<Tooltip title="No tienes permiso para hacer esto">
  <span>
    <button disabled={disabled} style={disabled ? { pointerEvents: 'none' } : {}}>
      Un botón desactivado
    </button>
  </span>
</Tooltip>

Transiciones

Usa una transición diferente.

Seguir el cursor

Puedes hacer que el tooltip siga el cursor estableciendo followCursor={true}.

Elemento virtual

Si necesitas implementar una colocación personalizada, puedes usar la prop anchorEl. El valor de anchorEl puede ser una referencia a un elemento DOM virtual. Debes crear un objeto con la forma de VirtualElement.

Mostrar y ocultar

El tooltip normalmente se muestra inmediatamente cuando el cursor del usuario pasa sobre el elemento y se oculta inmediatamente cuando el cursor se aleja. Puedes agregar un retraso en la visualización u ocultamiento del tooltip mediante las props enterDelay y leaveDelay.

En dispositivos móviles, el tooltip se muestra cuando el usuario realiza una pulsación larga sobre el elemento y se oculta después de un retraso de 1500ms. Puedes desactivar esta función con la prop disableTouchListener.

Accesibilidad

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)

Por defecto, el tooltip solo etiqueta su elemento hijo. Esto es diferente de title, que puede etiquetar o describir el elemento hijo dependiendo de si este ya tiene una etiqueta. Por ejemplo, en:

<button title="algo más de información">Un botón</button>

el title actúa como una descripción accesible. Si deseas que el tooltip actúe como una descripción accesible, puedes pasar la prop describeChild. No debes usar describeChild si el tooltip proporciona la única etiqueta visual del elemento, de lo contrario, el elemento hijo no tendrá un nombre accesible y el tooltip violará el criterio de éxito 2.5.3 de WCAG 2.1. (Inglés).

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

• <Tooltip />