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. |
Multiline | bool | false | Force the multiline display. |
AlwaysActive | bool | false | Always show tooltip, instead of just when hovering over the element. |
Inline | bool | false | Force inline block instead of trying to detect the element block. |
Fade | bool | false | Controls the fade effect. |