Tooltip component

Overview

Display a tooltip attached to any kind of element with different positioning.

Basic

<Tooltip Text="Hello tooltip">
    <Button Color="Color.Primary">Hover me</Button>
</Tooltip>

Positions

You can use one of the following modifiers to change positions of the tooltip:

• Top
• Bottom
• Left
• Right

<Tooltip Text="Hello tooltip" Placement="Placement.Top">
    <Button Color="Color.Primary">Top tooltip</Button>
</Tooltip>
<Tooltip Text="Hello tooltip" Placement="Placement.Right">
    <Button Color="Color.Primary">Right tooltip</Button>
</Tooltip>
<Tooltip Text="Hello tooltip" Placement="Placement.Left">
    <Button Color="Color.Primary">Left tooltip</Button>
</Tooltip>
<Tooltip Text="Hello tooltip" Placement="Placement.Bottom">
    <Button Color="Color.Primary">Bottom tooltip</Button>
</Tooltip>

Attributes

Name	Type	Default	Description
Text	string	null	Content displayed in the tooltip.
Placement	Placement	Top	Position of the tooltip relative to it’s component.
IsMultiline	bool	false	Force the multiline display.
IsAlwaysActive	bool	false	Always show tooltip, instead of just when hovering over the element.
IsInline	bool	false	Force inline block instead of trying to detect the element block.
IsFade	bool	false	Controls the fade effect.