Blazorise Tooltip component

Tooltips display additional information based on a specific action.

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>

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>
    </Tooltip>
</Div>

HTML Content

Your tooltip can also contain HTML. 
<Tooltip Text="<span style='color: aqua;'>Hello</span>, this is a <strong>bolded content</strong>!">
    <Button Color="Color.Primary">Html content</Button>
</Tooltip>

API

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
TriggerTargetId Which element the trigger event listeners are applied to (instead of the reference element). string null
ZIndex Specifies the z-index CSS on the root popper node. int? 9999
Interactive Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside without hiding. bool false
AppendTo The element to append the tooltip to. If Interactive = true, the default behavior is appendTo: "parent". string body
On this page