K
KoreUI

Tooltip

UI

Tooltip ligero con CSS puro para posicionamiento y Alpine.js para show/hide.

Uso básico

<x-kore::tooltip text="Información adicional">
    <x-kore::button label="Hover me" />
</x-kore::tooltip>
<x-kore::tooltip text="Información adicional">
    <x-kore::button label="Hover me" />
</x-kore::tooltip>

Posiciones

Cuatro posiciones disponibles: top, bottom, left, right.

<x-kore::tooltip text="Arriba" position="top">
    <x-kore::button label="Top" variant="outline" />
</x-kore::tooltip>

<x-kore::tooltip text="Abajo" position="bottom">
    <x-kore::button label="Bottom" variant="outline" />
</x-kore::tooltip>

<x-kore::tooltip text="Izquierda" position="left">
    <x-kore::button label="Left" variant="outline" />
</x-kore::tooltip>

<x-kore::tooltip text="Derecha" position="right">
    <x-kore::button label="Right" variant="outline" />
</x-kore::tooltip>
<x-kore::tooltip text="Arriba" position="top">
    <x-kore::button label="Top" variant="outline" />
</x-kore::tooltip>

<x-kore::tooltip text="Abajo" position="bottom">
    <x-kore::button label="Bottom" variant="outline" />
</x-kore::tooltip>

<x-kore::tooltip text="Izquierda" position="left">
    <x-kore::button label="Left" variant="outline" />
</x-kore::tooltip>

<x-kore::tooltip text="Derecha" position="right">
    <x-kore::button label="Right" variant="outline" />
</x-kore::tooltip>

Accesibilidad

El tooltip implementa las mejores prácticas de accesibilidad automáticamente.

  • role="tooltip" en el contenedor del texto
  • Se muestra con hover y focus
  • Se oculta con mouseleave y blur

Props

Prop Tipo Default Descripción
text string|null null Texto del tooltip
position string config(top) Posición: top, right, bottom, left
delay int config(200) Delay en ms antes de mostrar