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.