wiki-Tooltip

Ver en Git

---

Tooltip

El componente Tooltip permite posicionar y mostrar un mensaje emergente cerca de un elemento específico. Utiliza efectos y transiciones suaves para aparecer y desaparecer al interactuar con el usuario.

Referencia de la API

Props

Propiedad	Tipo	Descripción	Valor por defecto
children	ReactNode | string	Contenido del elemento principal que activará el tooltip al pasar el cursor sobre él.	Requerido
title	ReactNode | string	Contenido que se mostrará dentro del tooltip.	Requerido
aura-test	string	Identificador para pruebas automatizadas.	'aura-tooltip'
className	string	Clase CSS personalizada para el tooltip.	undefined
style	CSSProperties	Estilos en línea aplicados al tooltip.	undefined
classNameContainer	string	Clase CSS personalizada para el contenedor principal.	undefined

IPosition

Objeto interno utilizado para determinar la posición del tooltip.

Propiedad	Tipo	Descripción
top	string | number	Distancia desde la parte superior del viewport en píxeles.
bottom	string | number	Distancia desde la parte inferior del viewport en píxeles.
left	string | number	Distancia desde el lado izquierdo del viewport en píxeles.
right	string | number	Distancia desde el lado derecho del viewport en píxeles.

Ejemplo de uso

import { Tooltip } from '@auravant/ui-kit';

<Tooltip
 title="Este es un tooltip"
 style={{ backgroundColor: 'black', color: 'white' }}
>
 <button>Hover para ver el tooltip</button>
</Tooltip>;

Notas

• El tooltip calcula automáticamente su posición para evitar desbordar los límites de la ventana.
• Utiliza transiciones suaves con una duración de 200ms.
• Puede personalizarse completamente mediante las propiedades className y style.
• El tooltip se muestra al pasar el cursor sobre el contenedor y desaparece al salir del área.