A shadcn/ui inspired Blazor component library

Installation

Add the Tooltip component using the CLI:

shadcnblazor component add tooltip

Usage

The Tooltip component displays a floating label on hover. Use Anchor for the trigger element (e.g., icon or button) and Content or ChildContent for the tooltip text. Requires PopoverProvider in your layout (already present in the docs).

1

2

3

4

5

6

7

8

9

10

<Tooltip Content="Extended Thinking">
    <Anchor>
        <button type="button" class="flex size-9 items-center justify-center rounded-md bg-muted text-muted-foreground hover:bg-muted/80">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/>
                <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/>
            </svg>
        </button>
    </Anchor>
</Tooltip>

Examples

Add to library

Simple tooltip with Content on an icon button.

1

2

3

4

5

6

7

8

9

10

11

<Tooltip Content="Add to library">
    <Anchor>
        <button type="button" class="flex size-9 items-center justify-center rounded-md bg-muted text-muted-foreground hover:bg-muted/80">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/>
                <path d="M12 6v6"/>
                <path d="M9 9h6"/>
            </svg>
        </button>
    </Anchor>
</Tooltip>

Multiline

Use ChildContent for custom tooltip content (e.g., multiline text with line breaks).

1

2

3

4

5

6

7

8

9

10

11

12

13

<Tooltip>
    <Anchor>
        <button type="button" class="flex size-9 items-center justify-center rounded-md bg-muted text-muted-foreground hover:bg-muted/80">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/>
                <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/>
            </svg>
        </button>
    </Anchor>
    <ChildContent>
        <span class="block text-center">Extended<br/>Thinking</span>
    </ChildContent>
</Tooltip>

API Reference

Tooltip

Hover-triggered tooltip that displays content above the trigger element.

Properties

Name	Type	Description
`ContentClass`	`string`	Additional CSS classes for the tooltip content.
`Offset`	`int`	Gap in pixels between the tooltip and its trigger.
`DelayBeforeHideMs`	`int`	Delay in milliseconds before the tooltip hides after mouse leave.
`DelayBeforeShowMs`	`int`	Delay in milliseconds before the tooltip appears on hover.
`AdditionalAttributes`	`Dictionary<string, Object>`
`Class`	`string`
`Anchor`	`RenderFragment`	Content rendered as the trigger element (e.g., icon or button).
`ChildContent`	`RenderFragment`	The tooltip content (supports multiline text).
`Content`	`string`	Simple text content for the tooltip (alternative to ChildContent).

Methods

Method	Returns	Description
`Dispose`	`void`
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.