Tooltip: Blazor tooltip component

Examples

Placements

Top (default), Bottom, Left and Right. Hover each button.

website/Examples/Feedback/TooltipPlacementsExample.razor Source

Wrap anything

Icon buttons, avatars and badges all work as the trigger.

website/Examples/Feedback/TooltipContentExample.razor Source

Colors and always open

Add tooltip-{color} for a theme colour and tooltip-open to keep it visible.

website/Examples/Feedback/TooltipColorsExample.razor Source

Playground

ChildContent

Text

Placement Placement

<Tooltip
         Text="Last deployed 2 hours ago"
         Class="tooltip-open">
    Hover me
</Tooltip>

API

DaisyBlazor

Parameters

Arrow bool
= false
Accepted for MudBlazor compatibility; daisyUI tooltips always show an arrow.
Color Color
= Color.Default
Semantic colour of the tip (tooltip-{color}); Default adds no colour class.
Open bool
= false
Keeps the tip visible without hover or focus (tooltip-open).
Placement Placement
= Placement.Top
Tooltip placement relative to the wrapped content.
Text string
= null
Tooltip text shown on hover.
Class string
= null
Extra CSS classes merged onto the root tooltip element.
Style string
= null
Inline CSS styles applied to the root tooltip element.

Name	Type	Default	Description
Arrow	bool	false	Accepted for MudBlazor compatibility; daisyUI tooltips always show an arrow.
Color	Color	Color.Default	Semantic colour of the tip (tooltip-{color}); Default adds no colour class.
Open	bool	false	Keeps the tip visible without hover or focus (tooltip-open).
Placement	Placement	Placement.Top	Tooltip placement relative to the wrapped content.
Text	string	null	Tooltip text shown on hover.
Class	string	null	Extra CSS classes merged onto the root tooltip element.
Style	string	null	Inline CSS styles applied to the root tooltip element.

Content

ChildContent RenderFragment
Content wrapped by the daisyUI tooltip that triggers it on hover.

Name	Type	Description
ChildContent	RenderFragment	Content wrapped by the daisyUI tooltip that triggers it on hover.

From MudTooltip

Tooltip keeps MudTooltip's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.

Arrow is accepted but has no effect: daisyUI tooltips always have an arrow.

Tooltip