Tooltip

Tooltip displays informative text when users hover over, focus on,or tap an element.

Examples

Basic usage

Pass a checked value indicating whether it is checked, unchecked or indeterminate.

<script>
    import { Arrow, Popup, Tooltip } from '$lib/default/tooltip';

    const placement = /** @type {const} */('top-end');
</script>

<Tooltip {placement}>
    <button class='br-button-primary' slot="trigger">
        {placement}
    </button>
    <Popup>
        <Arrow/>
        I'm a <b>{placement}</b> tooltip!
    </Popup>
</Tooltip>

I'm a top-end tooltip!