Tooltip

Tooltip displays informative text when users hover, focus, or tap an element. Supports multiple positions and colors.

Basic Example

Tooltips with different positions

await import('/components/data-display/tooltip.js');
await import('/components/actions/button.js');

const { tags, $ } = Lightview;
const { div, Tooltip, Button } = tags;

const tooltips = div({ style: 'display: flex; flex-wrap: wrap; gap: 1rem' },
    Tooltip({ tip: 'Tooltip on top', position: 'top' },
        Button({}, 'Top')
    ),
    Tooltip({ tip: 'Tooltip on bottom', position: 'bottom' },
        Button({}, 'Bottom')
    ),
    Tooltip({ tip: 'Tooltip on left', position: 'left' },
        Button({}, 'Left')
    ),
    Tooltip({ tip: 'Tooltip on right', position: 'right' },
        Button({}, 'Right')
    )
);

$('#demo').content(tooltips);
await import('/components/data-display/tooltip.js');
await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { Tooltip, Button, div } = tags;

const tooltips = {
    tag: div,
    attributes: { style: 'display: flex; flex-wrap: wrap; gap: 1rem' },
    children: [
        {
            tag: Tooltip,
            attributes: { tip: 'Tooltip on top', position: 'top' },
            children: [{ tag: Button, children: ['Top'] }]
        },
        {
            tag: Tooltip,
            attributes: { tip: 'Tooltip on bottom', position: 'bottom' },
            children: [{ tag: Button, children: ['Bottom'] }]
        },
        {
            tag: Tooltip,
            attributes: { tip: 'Tooltip on left', position: 'left' },
            children: [{ tag: Button, children: ['Left'] }]
        },
        {
            tag: Tooltip,
            attributes: { tip: 'Tooltip on right', position: 'right' },
            children: [{ tag: Button, children: ['Right'] }]
        }
    ]
};

$('#demo').content(tooltips);
await import('/components/data-display/tooltip.js');
await import('/components/actions/button.js');
const { $ } = Lightview;

const tooltips = {
    div: {
        style: 'display: flex; flex-wrap: wrap; gap: 1rem',
        children: [
            { Tooltip: { tip: 'Tooltip on top', position: 'top', children: [ { Button: { children: ['Top'] } } ] } },
            { Tooltip: { tip: 'Tooltip on bottom', position: 'bottom', children: [ { Button: { children: ['Bottom'] } } ] } },
            { Tooltip: { tip: 'Tooltip on left', position: 'left', children: [ { Button: { children: ['Left'] } } ] } },
            { Tooltip: { tip: 'Tooltip on right', position: 'right', children: [ { Button: { children: ['Right'] } } ] } }
        ]
    }
};

$('#demo').content(tooltips);
<script type="module" src="/components/data-display/tooltip.js"></script>
<script type="module" src="/components/actions/button.js"></script>

<div style="display: flex; flex-wrap: wrap; gap: 1rem">
    <lv-tooltip tip="Tooltip on top" position="top">
        <lv-button>Top</lv-button>
    </lv-tooltip>
    <lv-tooltip tip="Tooltip on bottom" position="bottom">
        <lv-button>Bottom</lv-button>
    </lv-tooltip>
    <lv-tooltip tip="Tooltip on left" position="left">
        <lv-button>Left</lv-button>
    </lv-tooltip>
    <lv-tooltip tip="Tooltip on right" position="right">
        <lv-button>Right</lv-button>
    </lv-tooltip>
</div>

Colored Tooltips

Tooltips with semantic colors 

await import('/components/data-display/tooltip.js');
await import('/components/actions/button.js');

const { tags, $ } = Lightview;
const { div, Tooltip, Button } = tags;

const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'];

const tooltips = div({ style: 'display: flex; flex-wrap: wrap; gap: 1rem' },
    ...colors.map(color => 
        Tooltip({ tip: `${color.charAt(0).toUpperCase() + color.slice(1)} tooltip`, color },
            Button({ color, size: 'sm' }, color)
        )
    )
);

$('#demo').content(tooltips);
await import('/components/data-display/tooltip.js');
await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { Tooltip, Button, div } = tags;

const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'];

const tooltips = {
    tag: div,
    attributes: { style: 'display: flex; flex-wrap: wrap; gap: 1rem' },
    children: colors.map(color => ({
        tag: Tooltip,
        attributes: { tip: `${color.charAt(0).toUpperCase() + color.slice(1)} tooltip`, color },
        children: [{ tag: Button, attributes: { color, size: 'sm' }, children: [color] }]
    }))
};

$('#demo').content(tooltips);
await import('/components/data-display/tooltip.js');
await import('/components/actions/button.js');
const { $ } = Lightview;

const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'];

const tooltips = {
    div: {
        style: 'display: flex; flex-wrap: wrap; gap: 1rem',
        children: colors.map(color => ({
            Tooltip: {
                tip: `${color.charAt(0).toUpperCase() + color.slice(1)} tooltip`,
                color,
                children: [
                    { Button: { color, size: 'sm', children: [color] } }
                ]
            }
        }))
    }
};

$('#demo').content(tooltips);

Props

Prop Type Default Description
tip string - Tooltip text content
position string 'top' 'top' | 'bottom' | 'left' | 'right'
color string - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
open boolean false Force tooltip to stay open

Tooltip Gallery

Live examples using <lv-tooltip> custom elements.

Positions

Top Bottom Left Right

Colors

Primary Secondary Accent Info Success Warning Error

Force Open

Always Open