Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

Floating tooltip built on @floating-ui/dom. It wraps any trigger element and positions itself relative to it, automatically flipping and shifting to stay within the viewport. Position and content stay in sync after each Livewire morph. Nested tooltips work as expected: a floating element inside another keeps its parent open.

Basic usage

Pass the text as the content prop. The default slot is the trigger. Set an id whenever you need append-body or the $wirestrap.tooltip magic helper.

<x-wirestrap::tooltip content="I'm a tooltip">
    <button>Hover me</button>
</x-wirestrap::tooltip>

Focus behavior

The trigger can wrap any element, including interactive ones. Focusing an input inside the slot keeps the tooltip open.

Password

<x-wirestrap::tooltip>
    <x-wirestrap::input label="Password" password floating />

    <x-slot:content> ... </x-slot:content>
</x-wirestrap::tooltip>

Placement

Accepts top, bottom, left, right, and their -start/-end variants. If there is not enough room on the preferred side, the tooltip flips to the opposite side and shifts to stay visible.

<x-wirestrap::tooltip placement="top" content="Top"> ... </x-wirestrap::tooltip>
<x-wirestrap::tooltip placement="bottom" content="Bottom"> ... </x-wirestrap::tooltip>
<x-wirestrap::tooltip placement="left" content="Left"> ... </x-wirestrap::tooltip>
<x-wirestrap::tooltip placement="right" content="Right"> ... </x-wirestrap::tooltip>

Rich content

Use the content slot instead of the prop when the content contains HTML.

<x-wirestrap::tooltip>
    <span>?</span>

    <x-slot:content>
        <strong>Required.</strong> Must be unique across the workspace.
    </x-slot:content>
</x-wirestrap::tooltip>

Anchor element

By default the tooltip anchors to the trigger wrapper. Add data-ws-anchor to any element inside the slot to use it as the anchor instead, useful when the trigger covers a larger area but the tooltip should appear near a specific part of it.

Hover me

<x-wirestrap::tooltip ... >
    <div>
        <span>Hover me</span>
        <span data-ws-anchor></span>
    </div>
</x-wirestrap::tooltip>

Click trigger

Set trigger="click" to toggle the tooltip on click instead of hover. Clicking anywhere outside closes it.

<x-wirestrap::tooltip ... trigger="click"> ... </x-wirestrap::tooltip>

Body append

By default the tooltip lives inside the component's DOM subtree. If an ancestor has overflow: hidden or a low z-index stacking context, the tooltip may be clipped or obscured. Pass append-body to teleport it to <body> instead, which requires an id.

<x-wirestrap::tooltip
    ...
    id="modal-tip"
    append-body
>
    ...
</x-wirestrap::tooltip>

External control

Use the $wirestrap.tooltip Alpine magic helper to show, hide, or toggle any tooltip by id from anywhere on the page.

Target

<button x-on:click="$wirestrap.tooltip.show('help-tip')">Show</button>
<button x-on:click="$wirestrap.tooltip.toggle('help-tip')">Toggle</button>

<x-wirestrap::tooltip id="help-tip" content="Shown programmatically.">
    <span>Target</span>
</x-wirestrap::tooltip>

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::tooltip

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Element id. Required when using append-body or the $wirestrap.tooltip magic helper.
`content`	`ComponentSlot\|string`	`''`	Tooltip text. Use the content slot for HTML content.
`placement`	`string`	`config`	Preferred placement: top, bottom, left, right, and -start/-end variants. Flips automatically if out of bounds.
`trigger`	`string`	`config`	Show trigger: hover or click.
`arrow`	`bool`	`true`	Show the directional arrow.
`append-body`	`bool`	`config`	Teleport the tooltip element to <body> to avoid overflow clipping and z-index issues. Requires id.
`offset-distance`	`int`	`config`	Distance between the trigger and the tooltip in px.
`offset-skidding`	`int`	`config`	Lateral offset in px.
`position`	`string`	`config`	CSS positioning strategy: absolute or fixed.
No results found

$wirestrap.tooltip

Method	Type	Default	Description
`$wirestrap.tooltip.show(id)`	`--`	`--`	Show the tooltip with the given id.
`$wirestrap.tooltip.hide(id)`	`--`	`--`	Hide the tooltip with the given id.
`$wirestrap.tooltip.toggle(id)`	`--`	`--`	Toggle the tooltip with the given id.
No results found

⭐ GitHub

Tooltip