Tooltip Component
The Tooltip component provides a simple way to display helpful information when users hover over or focus on an element. It uses CSS peer selectors for hover states and includes proper ARIA attributes for accessibility.
Usage
Wrap any element with the tooltip component and provide the tooltip text:
<x-tooltip text="This is a helpful tooltip">
<x-button>Hover me</x-button>
</x-tooltip>
This is a helpful tooltip
Positions
Control where the tooltip appears relative to the trigger element using the position prop:
<x-tooltip text="Top tooltip" position="top">
<x-button>Top</x-button>
</x-tooltip>
<x-tooltip text="Bottom tooltip" position="bottom">
<x-button>Bottom</x-button>
</x-tooltip>
<x-tooltip text="Left tooltip" position="left">
<x-button>Left</x-button>
</x-tooltip>
<x-tooltip text="Right tooltip" position="right">
<x-button>Right</x-button>
</x-tooltip>
Top tooltip
Bottom tooltip
Left tooltip
Right tooltip
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
text |
string | '' |
The text content to display in the tooltip |
position |
string | top |
Position of the tooltip relative to the trigger. Options: top, bottom,
left, right
|
id |
string | Auto-generated | Unique ID for the tooltip element. Auto-generates if not provided (format:
tooltip-{unique})
|
References
| Category | Path / Name | Description |
|---|---|---|
| Component | resources/views/components/tooltip.blade.php | Tooltip component file |
For the detailed documentation, please visit the Penguin UI Tooltips.