Tooltip component


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


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


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 Text="Hello tooltip" Placement="Placement.Right">
    <Button Color="Color.Primary">Right tooltip</Button>
<Tooltip Text="Hello tooltip" Placement="Placement.Left">
    <Button Color="Color.Primary">Left tooltip</Button>
<Tooltip Text="Hello tooltip" Placement="Placement.Bottom">
    <Button Color="Color.Primary">Bottom tooltip</Button>


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.