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>

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