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.



<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>

Different trigger target

You may want the tooltip to appear at a different location from its trigger (event listeners) target.
Trigger target vs
<Div ElementId="tooltip-custom-target">
    Trigger target vs
    <Tooltip Text="I'm a tooltip!" TriggerTargetId="tooltip-custom-target" Inline>
        <Badge Color="Color.Warning">positioning target</Badge>


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
TriggerTargetId Which element the trigger event listeners are applied to (instead of the reference element). string null