# Tooltip

> AstrolTooltip: Blazor help text that appears on hover or keyboard focus, in four positions, accessible (aria-describedby) and never clipped by grids or modals.

Source page: https://doc.astrolui.com/basic-component/tooltip

Help text on hover or focus.

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

```razor
@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>
```

**Tip:** press Ctrl+K to search.

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