Tooltip

Tooltips are small textual hints displayed when a user hovers over a UI element.

Properties

Slots

Examples

Basic Usage

<Tooltip text="This is a tooltip">
    <Button>Hover me</Button>
</Tooltip>

Positions

<Tooltip position="top" />
<Tooltip position="left" />
<Tooltip position="right" />
<Tooltip position="bottom" />

Colors

<Tooltip color="soft" />
<Tooltip color="black" />
<Tooltip color="accent" />
<Tooltip color="danger" />

with Slot

You can use the tooltip slot to add advanced content to the tooltip.

<Tooltip>
    <Button>Hover me</Button>
    <div slot="tooltip">
        <div>This is a tooltip</div>
        <Callout type="info">It can contain any content</Callout>
    </div>
</Tooltip>

Long Text

By default, the maximum width of the tooltip is set to 300px. If the text is longer than this, it will wrap to the next line. You can change this value by setting the maxWidth prop.

<Tooltip 
    text="This is a very long text with a lot of characters and words. Let's see how this is displayed in a tooltip" 
    maxWidth={200}
>
    <Button>Hover me</Button>
</Tooltip>

Disabled

You can disable the tooltip by setting the disabled prop.

<Tooltip disabled text="Disabled Tooltip">
    <Button>Hover me</Button>
</Tooltip>