Accent color
# Callout
**Also known as:** Popover, Popup
## Description
A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Anchor | `RenderFragment?` | null | The content of the anchor element of the callout. |
| AnchorEl | `Func<ElementReference>?` | null | The setter function for element reference to the external anchor element. |
| AnchorId | `string?` | null | The id of the external anchor element. |
| ChildContent | `RenderFragment?` | null | The content of the callout. |
| Classes | `BitCalloutClassStyles?` | null | Custom CSS classes for different parts of the callout. |
| Content | `RenderFragment?` | null | Alias for ChildContent. |
| Direction | `BitDropDirection?` | null | Determines the allowed directions in which the callout should decide to be opened. |
| FixedCalloutWidth | `bool` | false | Forces the callout to preserve its component's original width. |
| FooterId | `string?` | null | The id of the footer element that renders at the end of the scrolling container of the callout contnet. |
| HeaderId | `string?` | null | The id of the header element that renders at the top of the scrolling container of the callout contnet. |
| IsOpen | `bool` | false | Determines the opening state of the callout. |
| MaxWindowWidth | `int?` | null | The max window width to consider when calculating the position of the callout before openning. |
| OnToggle | `EventCallback<bool>` | | The callback that is called when the callout opens or closes. |
| SetCalloutWidth | `bool` | false | Forces the callout to set its content container width while opening based on the available space and actual content. |
| ScrollContainerId | `string?` | null | The id of the element which needs to be scrollable in the content of the callout. |
| ScrollOffset | `int?` | null | The vertical offset of the scroll container to consider in the positining and height calculation of the callout. |
| ResponsiveMode | `BitResponsiveMode?` | null | Configures the responsive mode of the callout for the small screens. |
| Styles | `BitCalloutClassStyles?` | null | Custom CSS styles for different parts of the callout. |
| 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 |
| :--- | :--- | :------------ | :---------- |
| Toggle | `Task` | | Toggles the callout to open/close it. |
| 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
### BitDropDirection Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| All | 0 | The direction determined automatically based on the available spaces in all directions. |
| TopAndBottom | 1 | The direction determined automatically based on the available spaces in only top and bottom directions. |
### BitResponsiveMode Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| None | 0 | Disables the responsive mode. |
| Panel | 1 | Enables the panel responsive mode. |
| Top | 2 | Enables the top responsive mode. |
### 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
### BitCalloutClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitCallout. |
| AnchorContainer | `string?` | null | Custom CSS classes/styles for the anchor container element of the BitCallout. |
| Opened | `string?` | null | Custom CSS classes/styles for the opened callout state of the BitCallout. |
| Content | `string?` | null | Custom CSS classes/styles for the content of the BitCallout. |
| Overlay | `string?` | null | Custom CSS classes/styles for the overlay of the BitCallout. |
## Examples
\n**Basic**:
```razor
Show callout
```
\n**External anchor**:
```razor
AnchorId
```
```csharp
private ElementReference anchorEl;
private BitCallout callout1;
private BitCallout callout2;
```
\n**Binding**:
```razor
Show callout
```
```csharp
private bool isOpen;
```
\n**DropDirection**:
```razor
Show callout
Show callout
```
\n**ScrollContainerId**:
```razor
Show callout
```
\n**Style & Class**:
```razor
Show callout
Show callout
Show callout
Show callout
This is the callout content.
```
This is the callout content.
This is the callout content.
You can even close it from here!
Done
Cancel
You can even close it from here!
@for (int i = 1; i < 13; i++)
{
var item = i;
}
Callout content @(item)
}
@for (int i = 1; i < 13; i++)
{
var item = i;
}
Callout content @(item)
}
@for (int i = 1; i < 69; i++)
{
var item = i;
}
Callout content @(item)
}
This is the callout content.
This is the callout content.
This is the callout content.