Tooltip

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

Basic Example

Tooltips with different positions


const { default: Tooltip } = await import('/components/data-display/tooltip.js');
const { default: Button } = await import('/components/actions/button.js');

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

const tooltips = div({ class: 'flex flex-wrap gap-4 p-8' },
    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').insert(tooltips);

Colored Tooltips

Tooltips with semantic colors


const { default: Tooltip } = await import('/components/data-display/tooltip.js');
const { default: Button } = await import('/components/actions/button.js');

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

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

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

$('#demo').insert(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

Positions

Colors

Force Open

For more examples, see the DaisyUI Tooltip documentation.