Tooltip component

The <Tooltip> component is useful for conveying information when a user hovers over an element. When activated, tooltips display a text label identifying an element, such as a description of its function.

Examples

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

Attributes

Name Description Type Default
Text Content displayed in the tooltip. string null
Placement Position of the tooltip relative to it’s component. TooltipPlacement Top
Multiline Force the multiline display. bool false
AlwaysActive Always show tooltip, instead of just when hovering over the element. bool false
Inline Force inline block instead of trying to detect the element block. bool false
Fade Controls the fade effect. bool false
FadeDuration Duration in ms of the fade transition animation. int 300
Trigger Determines the events that cause the tooltip to show. TooltipTrigger MouseEnterFocus