Tooltip

Tooltip component documentation for Velyx. Installation, usage examples, positions, timing, and customization guidance for Laravel Blade, Alpine.js, Livewire, and Tailwind CSS v4.

Tooltip

Tooltips reveal short contextual help without cluttering the surrounding interface.

Installation

Add the tooltip component to your project:

npx velyx@latest add tooltip
pnpm dlx velyx@latest add tooltip
yarn dlx velyx@latest add tooltip
bunx --bun velyx@latest add tooltip

Alpine.js Required: The tooltip component uses Alpine.js to handle delayed show and hide behavior.

Usage

Default Tooltip

Tooltip

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Tooltip

Full preview from the registry iframe.

Open in tab

Loading preview...

Positioning

Tooltip

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Tooltip

Full preview from the registry iframe.

Open in tab

Loading preview...

Tooltip

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Tooltip

Full preview from the registry iframe.

Open in tab

Loading preview...

Without Arrow

Tooltip

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Tooltip

Full preview from the registry iframe.

Open in tab

Loading preview...

Custom Delay

Tooltip

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Tooltip

Full preview from the registry iframe.

Open in tab

Loading preview...

Props

Prop Type Default Description
content string '' Text shown inside the tooltip
position string 'top' Placement: top, bottom, left, or right
delay int 200 Delay in milliseconds before the tooltip appears
arrow bool true Shows or hides the tooltip arrow

Example Structure

<x-ui.tooltip content="Open project settings" position="right">
    <x-ui.button variant="ghost" size="icon">?</x-ui.button>
</x-ui.tooltip>

Accessibility

  • Role - Uses role="tooltip" for the floating content
  • Pointer and focus support - Opens on hover and keyboard focus
  • Progressive disclosure - Best for short guidance, not long-form content

Next Steps