Tooltip

Un consejo de texto sencillo que usa su nodo secundario como ancla. Este componente solo acepta contenido de texto y puede ser excelente alternativa al title atributo del navegador con su tamaño pequeño y su largo retraso de aparición.

§Uso

import {Tooltip} from '@gravity-ui/uikit';

<Tooltip content="Content">
  <div tabIndex={0}>Anchor</div>
</Tooltip>;

§Ancla

Para poder Tooltip trabajar, debe aprobar un documento válido ReactElement como niño que acepte ref propiedades para HTMLElement y otras propiedades para HTMLElement.

Alternativamente, puede pasar la función como elemento secundario para proporcionar referencias y accesorios manualmente a sus componentes subyacentes:

import {Tooltip} from '@gravity-ui/uikit';

<Tooltip content="Content">
  {(props, ref) => <MyCustomButton buttonProps={props} buttonRef={ref} />}
</Tooltip>;

§Estado controlado

De forma predeterminada, Tooltip se abre y se oculta al colocar el cursor sobre el ancla. Puede cambiar este comportamiento para establecer manualmente el estado de apertura. Pasa tu estado al open utilero y cámbialo por onOpenChange callback. onOpenChange la devolución de llamada tiene la siguiente firma: (open: boolean, event? : Evento, motivo: «flotar» | 'enfoque') => vacío.

§Rol

Tooltip acepta la role propiedad, lo que cambia la forma en que debe actuar en términos de accesibilidad. tooltip el rol debe usarse cuando el ancla tiene su propio texto y el label rol en caso contrario (por ejemplo, en el botón del icono).

§Propiedades

§API CSS