Tooltip

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Tooltip
  text="Helpful information"
  position="top"
/>

Legacy mount name: data-component="Tooltip".

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Tooltip.wrn

component Tooltip {
  props {
    class = ""
    text = "Helpful information"
    position = "top"
  }
  view {
        <span class="group relative inline-flex {class}">
        <slot />
        <span role="tooltip" class="pointer-events-none absolute z-40 w-max max-w-xs rounded-lg bg-slate-950 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:opacity-100 group-focus-within:opacity-100 {position === 'bottom' ? 'left-1/2 top-full mt-2 -translate-x-1/2' : 'bottom-full left-1/2 mb-2 -translate-x-1/2'}">{text}</span>
        </span>
    }
}