# Tooltip
**Also known as:** Tip, Hint
## Description
Tooltip briefly describes an unlabeled control or adds a bit of information to a labeled one, in a small surface shown next to what it belongs to. It is shown on hover and on focus, or on a press of the anchor with either the pointer or the keyboard, after delays of your choosing, on any of twelve positions around its anchor, with an arrow pointing back at it. It holds a text or any content you give it, can be made hoverable so the pointer may travel into it, answers a touch with a tap or a long press, is dismissed by the Escape key, names or describes its anchor to a screen reader, shares its delays with the tooltips around it, and can be driven from your own code through a two-way bound state or its Show, Hide and Toggle methods.
## Notes
The tooltip is laid out entirely in CSS, next to its anchor and inside the flow of the page, which is what makes it free of any positioning pass and of all but one line of JavaScript - the one that copies the relationship onto the anchor. The two things that follow from it are worth knowing before you place one: it is clipped by an ancestor that hides its overflow, and it stays on the side you asked for rather than flipping to the one with room on it. A surface that has to escape an overflow, find its own room on the screen, or hold something to click or type in is a BitCallout rather than a tooltip.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Anchor | `RenderFragment?` | null | Child content of component, the content that the Tooltip will apply to. |
| ArrowSize | `int?` | null | The size in pixels of the arrow that points at the anchor, which is the length of the side of the square it is drawn from. Leaving it unset keeps the size the theme gives it. |
| ChildContent | `RenderFragment?` | null | Child content of component, the content that the Tooltip will apply to. |
| Classes | `BitTooltipClassStyles?` | null | Custom CSS classes for different parts of the BitTooltip. |
| Color | `BitColor?` | null | The general color of the tooltip, which colors its surface and the arrow along with it. |
| DefaultIsShown | `bool?` | null | Default value of the IsShown. |
| FullWidth | `bool` | false | Expands the tooltip's own element to 100% of the available width, so that the anchor inside it keeps the width it would have had without a tooltip around it. The tooltip wraps its anchor in an element laid out inline, which would otherwise shrink a block-level anchor to its content. |
| HideArrow | `bool` | false | Hides the arrow of tooltip. |
| HideDelay | `int` | 0 | Delay (in milliseconds) before hiding the tooltip. It is the grace an interactive tooltip needs while the pointer crosses the gap between the anchor and the tooltip, and the pause that keeps a tooltip from flickering while the pointer skims across a row of anchors. Leaving it alone inside a BitTooltipGroup takes the delay the group sets. |
| HideOnClick | `bool` | false | Hides the tooltip when the anchor is pressed, which is what a tooltip on a control that does something when pressed owes the reader. It answers Enter and Space the way it answers the pointer. A tooltip the press is meant to open and close instead is ShowOnClick, which takes the press over when it is on. |
| Interactive | `bool` | false | Lets the pointer travel into the tooltip and stay there without it being hidden, which is what WCAG 1.4.13 asks of content shown on hover. The gap between the anchor and the tooltip is bridged, so the pointer never leaves the component on its way over. |
| IsShown | `bool` | false | The visibility state of the tooltip. |
| IsShownChanged | `EventCallback<bool>` | | The callback that is called when the visibility state of the tooltip changes. |
| LazyRender | `bool` | false | Holds the content of the tooltip out of the DOM until the tooltip is first shown, and keeps it rendered from then on. |
| MaxWidth | `string?` | null | The maximum width of the tooltip as a CSS value (e.g. "20rem"), beyond which its text wraps onto another line instead of the tooltip growing wider. A value of "none" takes the cap off. |
| MirrorInRtl | `bool` | false | Mirrors the position of the tooltip along the horizontal axis while the direction is right to left, so that a position named for one side of the anchor lands on the side the reader starts at. The positions are named for the sides of the screen rather than for the reading order, so Left is the left of the anchor in either direction unless this is turned on. |
| NoAnimation | `bool` | false | Removes the fade the tooltip is shown and hidden with, so that it simply appears. |
| NoDismissOnEscape | `bool` | false | Keeps the Escape key from dismissing the tooltip. Dismissing content shown on hover or focus without moving either of them is what WCAG 1.4.13 asks for, so only turn it off for a tooltip that obscures nothing. |
| NoTouch | `bool` | false | Keeps a touch or a pen from showing the tooltip at all, leaving the anchor to answer the tap alone. Turn it on for a tooltip that only repeats what a touch user can already read. |
| Offset | `int?` | null | The distance in pixels between the anchor and the tooltip, which is also the room the arrow is drawn in. An arrow that reaches further than this is given the room it needs anyway, so this is the smallest distance rather than the exact one. Leaving it unset keeps the distance the theme gives it. |
| OnHide | `EventCallback` | | The callback that is called when the tooltip is hidden. |
| OnShow | `EventCallback` | | The callback that is called when the tooltip is shown. |
| OnToggle | `EventCallback<bool>` | | The callback that is called when the tooltip is shown or hidden, with the new state. |
| Position | `BitTooltipPosition` | BitTooltipPosition.Top | The position of tooltip around its anchor. |
| Relationship | `BitTooltipRelationship` | BitTooltipRelationship.Description | What the tooltip is to the anchor it belongs to, which decides whether the anchor is given an aria-describedby, an aria-labelledby or neither. The relationship is declared on the element the anchor is wrapped in and copied onto the first focusable control inside it, since a name or a description is computed on the element that has the focus. |
| ShowDelay | `int` | 0 | Delay (in milliseconds) before showing the tooltip. It applies to the pointer only: a tooltip reached with the keyboard or opened by a click is shown at once. Leaving it alone inside a BitTooltipGroup takes the delay the group sets, which the group also drops while another of its tooltips is still fresh in mind. |
| ShowOnClick | `bool` | false | Turns the anchor into a toggle for the tooltip, which is shown by a press of it and taken away by the next one. Enter and Space are a press of the anchor as much as the pointer is, and what dismisses it besides a second press is the Escape key and the focus leaving the anchor. It takes the press over from HideOnClick. |
| ShowOnFocus | `bool` | true | Determines whether the tooltip is shown when the anchor takes the focus, so that a tooltip reached with the keyboard is shown the way it is to a pointer. A focus that follows a press of the pointer is left to the pointer, the way :focus-visible does it in CSS. |
| ShowOnHover | `bool` | true | Determines whether the tooltip is shown while the pointer is over the anchor. The hover and the focus are kept apart, so a pointer leaving an anchor the keyboard is still on does not take the tooltip away with it. |
| Size | `BitSize?` | null | The size of the tooltip, which sets the size of its text and the padding around it. |
| Styles | `BitTooltipClassStyles?` | null | Custom CSS styles for different parts of the BitTooltip. |
| Template | `RenderFragment?` | null | The content you want inside the tooltip. |
| Text | `string?` | null | The text of tooltip to show. |
| TouchHideDelay | `int` | 1500 | The time in milliseconds a tooltip shown by a touch stays before it hides itself. A touch leaves no pointer behind that can leave the anchor again. Zero leaves it shown until something else hides it. |
| TouchShowDelay | `int` | 0 | The time in milliseconds a touch has to rest on the anchor before the tooltip is shown, which turns a tap that only meant to press the anchor into a press that leaves the tooltip out of it. Zero shows the tooltip on the tap itself. |
| ZIndex | `int?` | null | The stacking order of the tooltip surface and its arrow. Leaving it unset keeps the one the theme gives every popup surface in the library. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Show | `Task` | | Shows the tooltip programmatically, at once and regardless of the triggers it is configured with, unless it is disabled. |
| Hide | `Task` | | Hides the tooltip programmatically, at once and regardless of the delays it is configured with. |
| Toggle | `Task` | | Toggles the tooltip to show/hide it. |
| TooltipId | `string` | | The id of the element the text of the tooltip is rendered in, which is what an anchor of your own points its aria-describedby or aria-labelledby at. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitTooltipPosition Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Top | 0 | The position of tooltip top of its anchor |
| TopLeft | 1 | The position of tooltip top left of its anchor |
| TopRight | 2 | The position of tooltip top right of its anchor |
| RightTop | 3 | The position of tooltip right top of its anchor |
| Right | 4 | The position of tooltip right of its anchor |
| RightBottom | 5 | The position of tooltip right bottom of its anchor |
| BottomRight | 6 | The position of tooltip bottom right of its anchor |
| Bottom | 7 | The position of tooltip bottom of its anchor |
| BottomLeft | 8 | The position of tooltip bottom left of its anchor |
| LeftBottom | 9 | The position of tooltip left bottom of its anchor |
| Left | 10 | The position of tooltip left of its anchor |
| LeftTop | 11 | The position of tooltip left top of its anchor |
### BitTooltipRelationship Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Description | 0 | The tooltip adds information to an anchor that already has a name of its own, and is pointed at with aria-describedby. |
| Label | 1 | The tooltip is the name of an anchor that has none of its own - an icon-only button, above all - and is pointed at with aria-labelledby. |
| None | 2 | The tooltip is left out of the accessibility tree altogether, for the case where the anchor already carries the same text by another route. |
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size tooltip. |
| Medium | 1 | The medium size tooltip. |
| Large | 2 | The large size tooltip. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitTooltipGroup Properties
Groups the tooltips inside it so that they share their delays, so that the second of them is shown without its delay while the first is still fresh in mind, and so that only one of them is on the screen at a time. It renders nothing of its own.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AllowMultiple | `bool` | false | Lets more than one tooltip of the group be on the screen at a time. A group shows one tooltip at a time by default, which is what a row of controls with a tooltip each needs. |
| ChildContent | `RenderFragment?` | null | The tooltips the group is around. |
| HideDelay | `int?` | null | The delay in milliseconds before hiding, for every tooltip in the group that does not set one of its own. |
| ShowDelay | `int?` | null | The delay in milliseconds before showing, for every tooltip in the group that does not set one of its own. |
| SkipDelay | `int` | 300 | How long in milliseconds after a tooltip of the group has been hidden another one of them is shown at once rather than waiting out the show delay. Zero makes every tooltip wait out its own delay. |
### BitTooltipClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitTooltip. |
| TooltipWrapper | `string?` | null | Custom CSS classes/styles for the tooltip wrapper of the BitTooltip. |
| Tooltip | `string?` | null | Custom CSS classes/styles for the tooltip of the BitTooltip. |
| Arrow | `string?` | null | Custom CSS classes/styles for the arrow of the BitTooltip. |
## Examples
\n**Basic**:
```razor
Hover over me
Disabled tooltip
```
\n**Position**:
```razor
Top
TopLeft
TopRight
RightTop
Right
RightBottom
BottomRight
Bottom
BottomLeft
LeftBottom
Left
LeftTop
```
\n**Triggers**:
```razor
Hover
Focus (tab to me)
Click
HideOnClick
TouchShowDelay
NoTouch
```
\n**Delay**:
```razor
ShowDelay
HideDelay
```
\n**Grouping**:
```razor
Bold
Italic
Underline
No delay of my own
```
\n**Arrow & offset**:
```razor
Default
HideArrow
ArrowSize
Offset
```
\n**Interactive**:
```razor
Interactive
Not interactive
```
\n**Custom content**:
```razor
Hover over me
```
\n**Max width**:
```razor
10rem
Default
```
\n**Dismissal**:
```razor
Dismissible
NoDismissOnEscape
```
\n**Accessibility**:
```razor
Save
```
\n**Lazy rendering**:
```razor
LazyRender
Rendered up front
@* TooltipRenderStamp.razor - the stamp is taken once, while the content is first rendered, rather
than on every rerender of the tooltip. *@
DefaultIsShown
@bind-IsShown
```
```csharp
private bool isShown = true;
```
\n**Methods**:
```razor
Show
Hide
Toggle
Anchor
```
```csharp
private BitTooltip? tooltipRef;
```
\n**Events**:
```razor
Hover over me
@foreach (var item in events.Take(6))
{
events = [];
```
\n**Advanced**:
```razor
Anchor
> tooltipPositionList = Enum.GetValues(typeof(BitTooltipPosition))
.Cast()
.Select(enumValue => new BitDropdownItem
{
Value = enumValue,
Text = enumValue.ToString()
})
.ToList();
```
\n**Color**:
```razor
Primary
Secondary
Tertiary
Info
Success
Warning
SevereWarning
Error
PrimaryBackground
SecondaryBackground
TertiaryBackground
PrimaryForeground
SecondaryForeground
TertiaryForeground
PrimaryBorder
SecondaryBorder
TertiaryBorder
```
\n**Size**:
```razor
Small
Medium
Large
```
\n**Style & Class**:
```razor
Hover over me
Hover over me
Hover over me
Hover over me
```
\n**RTL**:
```razor
نشانگر ماوس را روی من بیاورید
Left
Left + MirrorInRtl
```
- 1. One
- 2. Two
Rendered at @renderedAt.ToString("HH:mm:ss")
@code {
private DateTime renderedAt;
protected override void OnInitialized()
{
renderedAt = DateTime.Now;
}
}
```
\n**Binding**:
```razor
@item
}
```
```csharp
private readonly List- ۱. یک
- ۲. دو