Tooltip Component

Simple — positions

<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

<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

<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

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