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.