Tooltip component


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

Starting with v0.9.4, Tooltip component is powered by Tippy.js.


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


Name Type Default Description
Text string null Content displayed in the tooltip.
Placement TooltipPlacement 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.
FadeDuration int 300 Duration in ms of the fade transition animation.
Trigger TooltipTrigger MouseEnterFocus Determines the events that cause the tooltip to show.