Tooltip

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

Properties

Name
Default
Description
text
The text to display in the tooltip.
position
top
One of the following:
  • top
  • bottom
  • left
  • right
color
black
One of the following:
  • black
  • accent
  • soft
  • danger
maxWidth
300
The max width of the tooltip in pixels.
delay
100
The delay in milliseconds before the tooltip is shown after hovering.
wrapperProps
Props to pass to the wrapping <div> element, such as class or style.

Slots

Name
Description
default
The content that triggers the tooltip when hovered over.
tooltip
The content of the tooltip. This can be used instead of the text prop.

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>
    {#snippet tooltip()}
        <div>
            <div>This is a tooltip</div>
            <Callout type="info">It can contain any content</Callout>
        </div>
    {/snippet}
</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>

Delay

By default, the tooltip is shown 100ms after hovering. You can change this value by setting the delay prop.

<Tooltip text="Shows after 1 second" delay={1000}>
    <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>