Tooltip

Display a small contextual bubble when a user hovers over an element. The tooltip component is a pure CSS wrapper — no JavaScript is required. Wrap any element with <x-bladewind::tooltip> and pass the message via the text attribute.

        
            <x-bladewind::tooltip text="This is a tooltip">
                <x-bladewind::button>Hover over me</x-bladewind::button>
            </x-bladewind::tooltip>

Any element can be wrapped — a button, an icon, a link, a table cell, or plain text. The tooltip bubble appears on hover and disappears when the cursor leaves.

        
            <x-bladewind::tooltip text="View user profile">
                <x-bladewind::icon name="user-circle" class="size-6 text-slate-500 cursor-pointer" />
            </x-bladewind::tooltip>

Position

The tooltip bubble can appear above, below, to the left, or to the right of the wrapped element. Set the position attribute to control where the bubble appears. The default is top.

        
            <x-bladewind::tooltip text="Appears on top" position="top">...</x-bladewind::tooltip>
            <x-bladewind::tooltip text="Appears on the right" position="right">...</x-bladewind::tooltip>
            <x-bladewind::tooltip text="Appears at the bottom" position="bottom">...</x-bladewind::tooltip>
            <x-bladewind::tooltip text="Appears on the left" position="left">...</x-bladewind::tooltip>

Colour

Tooltips come in two colour themes: dark (default) and light. The dark theme uses a slate-800 background with white text. The light theme uses a white background with a border, shadow, and slate-600 text — both adapt correctly in dark mode.

        
            <x-bladewind::tooltip text="I am dark (default)" color="dark">...</x-bladewind::tooltip>
            <x-bladewind::tooltip text="I am light" color="light">...</x-bladewind::tooltip>

Tooltips In Scrolling Containers

A tooltip is drawn as its own element attached to the page body and positioned against its trigger, so it is never cut off by whatever the trigger happens to sit inside. That matters most in tables: a wide table needs a horizontally scrolling wrapper, and such a wrapper clips vertically as well — which used to swallow the tooltips on a table's action icons.

Nothing is required of you. It applies to the Tooltip component, to the tip on a table's action icons, and to any element you have given a data-tooltip attribute by hand.

Tooltips need tooltip.js, which the components load for you. If you are using data-tooltip on your own markup with no BladewindUI tooltip or table on the page, add @bladewindScripts('tooltip') to your layout. Without the script the tooltip still renders from CSS alone — it is just clipped by scrolling ancestors, as it was before.

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Tooltip component.

IMPORTANT: All component text/labels can be found in lang/bladewind.php. You can translate these into your preferred languages

Option	Default	Available Values
text	blank	The message to display inside the tooltip bubble. No bubble is rendered when this is empty.
position	top	Where the bubble appears relative to the wrapped element. `top` `bottom` `left` `right`
color	dark	Colour theme for the bubble background. `dark` `light`
size	small	Controls the text size and padding inside the bubble. `tiny` `small` `regular`
class	blank	Any additional CSS classes to apply to the tooltip wrapper element.

Tooltip with all attributes defined

        
            <x-bladewind::tooltip
                text="Delete this record"
                position="right"
                color="light"
                size="regular"
                class="ml-2">
                <x-bladewind::icon name="trash" class="size-5 text-red-500 cursor-pointer" />
            </x-bladewind::tooltip>

The source file for this component is available in resources > views > components > bladewind > tooltip.blade.php