1. Demo AstrolTooltip

Wrap the element with AstrolTooltip. It appears on hover (after Delay ms) or right away on keyboard focus, and closes with Esc. If it doesn't fit on the chosen side, it goes to the opposite one. The focusable element gets aria-describedby, so screen readers read the help.

@using Astrol.Component.Basic.Tooltip

<AstrolTooltip Text="Save the changes">

 <AstrolButton Text="Top" Style="AstrolStyle.White" />

</AstrolTooltip>

<AstrolTooltip Text="Opens below" Placement="AstrolTooltipPlacement.Bottom">

 <AstrolButton Text="Bottom" Style="AstrolStyle.White" />

</AstrolTooltip>

@* Own content: Content instead of Text. An icon needs tabindex="0" to be reachable by keyboard *@

<AstrolTooltip Placement="AstrolTooltipPlacement.Bottom">

 <ChildContent>

 <i class="astrol-help-circled" tabindex="0" aria-label="Help"></i>

 </ChildContent>

 <Content><b>Tip:</b> press Ctrl+K to search.</Content>

</AstrolTooltip>

Supported parameters

• ChildContent (RenderFragment), the element that carries the help.
• Text (string), help text, or Content (RenderFragment) for your own content.
• Placement (AstrolTooltipPlacement), Top (default), Bottom, Left or Right.
• Delay (int), wait in milliseconds on hover (default 300).
• Class (string), css class of the wrapper.

A standalone icon needs tabindex="0" and aria-label to be reachable by keyboard. On icon-only buttons also set their aria-label: the tooltip is extra help, not their name.