Neura UI

Loading…

Logo
Neura UI
All pages 108

Tooltip

A short label for an icon or a control, with keyboard shortcuts, on hover and on focus.

Basic Usage

Wrap the trigger. The tooltip opens on hover after a short delay and on keyboard focus, never on a click. Within a toolbar, the next tooltips open at once.
blade 
<neura::tooltip content="Run" kbd="⌘ ↵">
    <neura::button variant="ghost" icon="play" squared aria-label="Run" />
</neura::tooltip>

Position and Variant

position takes a side and an optional alignment (bottom-start). A tooltip without room flips to the other side, and its arrow follows. variant="light" reads better over dark surfaces.
blade 
<neura::tooltip content="Right" position="right">…</neura::tooltip>
<neura::tooltip content="Light" variant="light" :arrow="false">…</neura::tooltip>

Rich Content

A content slot takes markup instead of the text.
blade 
<neura::tooltip position="bottom">
    <x-slot:content><strong>Draft</strong> · saved 2 minutes ago</x-slot:content>
    <neura::badge variant="soft">Draft</neura::badge>
</neura::tooltip>

Configuration

Defaults live in config/neura-kit.php, like the other components. A prop on the tag wins over them.
php 
'tooltip' => Config::tooltip([
    'default' => [
        'variant' => 'dark',    // dark | light
        'position' => 'top',
        'arrow' => true,
        'delay' => 250,         // ms before the first one opens
        'rounded' => 'global',
    ],
]),
'tooltip' => Config::tooltip([
    'default' => [
        'variant' => 'dark',    // dark | light
        'position' => 'top',
        'arrow' => true,
        'delay' => 250,         // ms before the first one opens
        'rounded' => 'global',
    ],
]),

Props

Prop Type Default Description
content string|slot null The text, or markup in a content slot
kbd string|array null Keys shown after the text: '⌘ K' is two keys
position string config: 'top' top|right|bottom|left, with -start or -end
offset int 8 Distance from the trigger, in pixels
variant dark|light config: dark
arrow boolean config: true
delay int config: 250 Wait before the first tooltip opens
rounded string config: global Corners
disabled boolean false Never open