Laravel Tooltip Component
Free · MITA lightweight popup component that displays additional information when hovering or focusing on an element.
A Tooltip built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag:
<x-aura::tooltip>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::tooltip text="This is a tooltip">
<x-aura::button>Hover me</x-aura::button>
</x-aura::tooltip>See the full API, props and live examples in the Tooltip documentation.
Overview
The <x-aura::tooltip> component renders a small popup label that appears when the user hovers over or focuses on the wrapped element. It supports four positioning options, a configurable appearance delay, and smooth enter/leave transitions powered by Alpine.js. Tooltips are ideal for providing brief contextual help or labeling icon-only buttons.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text |
string |
'' |
The text content displayed inside the tooltip. |
position |
string |
'top' |
Where the tooltip appears relative to the trigger element. Options: top, bottom, left, right. |
delay |
int |
200 |
Delay in milliseconds before the tooltip appears on hover. |
Slots
| Slot | Description |
|---|---|
Default ($slot) |
The trigger element that the user hovers or focuses to reveal the tooltip. |
See more examples and every variant in the Tooltip documentation.