Tooltip Component
Simple — positions
Four positions: top, bottom, left, right
Tooltip on top
Tooltip on bottom
Tooltip on left
Tooltip on right
razor
<Tooltip Text="Tooltip on top" Position="top">
<Button Variant="secondary" Size="md" Text="Top" />
</Tooltip>
<Tooltip Text="Tooltip on bottom" Position="bottom">
<Button Variant="secondary" Size="md" Text="Bottom" />
</Tooltip>
<Tooltip Text="Tooltip on left" Position="left">
<Button Variant="secondary" Size="md" Text="Left" />
</Tooltip>
<Tooltip Text="Tooltip on right" Position="right">
<Button Variant="secondary" Size="md" Text="Right" />
</Tooltip>Simple — alignment
Center, start, end
Center aligned (default)
Start aligned
End aligned
razor
<Tooltip Text="Center aligned" Position="top" Alignment="center">
<Button Variant="secondary" Text="Center" />
</Tooltip>
<Tooltip Text="Start aligned" Position="top" Alignment="start">
<Button Variant="secondary" Text="Start" />
</Tooltip>
<Tooltip Text="End aligned" Position="top" Alignment="end">
<Button Variant="secondary" Text="End" />
</Tooltip>Rich — with title and description
Two-line tooltip with headline
Feature name
This is a helpful description of the feature that spans multiple lines.
Feature name
This is a helpful description of the feature that spans multiple lines.
Feature name
This is a helpful description of the feature.
razor
<Tooltip Title="Feature name"
Description="This is a helpful description of the feature that spans multiple lines."
Position="top">
<Button Variant="secondary" Text="Rich Top" />
</Tooltip>On different elements
Tooltip wraps any interactive target
Primary action
More info
Hover me
Click to learn more
razor
@* Button trigger *@
<Tooltip Text="Primary action" Position="top">
<Button Variant="primary" Text="Button" />
</Tooltip>
@* Icon trigger — info glyph *@
<Tooltip Text="More info" Position="top">
<span style="cursor: help;">
<svg viewBox="0 0 20 20">...info icon...</svg>
</span>
</Tooltip>
@* Plain text trigger *@
<Tooltip Text="Click to learn more" Position="bottom">
<span style="text-decoration: underline;">Hover me</span>
</Tooltip>