Home Docs

Callout
Popover
Popup

A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them.

Usage

Basic
Basic usage of BitCallout component with a simple content and a button as the anchor to show or hide the callout.

This is the callout content.
External anchor
Use an external element as the anchor for a BitCallout component, with both ID-based and ElementSelector-based anchoring options.

Selected date
July 2025
S
M
T
W
T
F
S
Selected date
July 2025
S
M
T
W
T
F
S
Binding
Bind the Open state of BitCallout component to a boolean variable, allowing for more control over its opening and closing behavior.

This is the callout content.
You can even close it from here!

DropDirection
Explores different drop directions for the BitCallout component, including automatic and explicit directions.


DropDirection: All

Callout content 1

Callout content 2

Callout content 3

Callout content 4

Callout content 5

Callout content 6

Callout content 7

Callout content 8

Callout content 9

Callout content 10

Callout content 11

Callout content 12




DropDirection: TopAndBottom

Callout content 1

Callout content 2

Callout content 3

Callout content 4

Callout content 5

Callout content 6

Callout content 7

Callout content 8

Callout content 9

Callout content 10

Callout content 11

Callout content 12

ScrollContainerId
Utilizaing the ScrollContainerId one can enable scrolling the content of the callout.


Callout content 1

Callout content 2

Callout content 3

Callout content 4

Callout content 5

Callout content 6

Callout content 7

Callout content 8

Callout content 9

Callout content 10

Callout content 11

Callout content 12

Callout content 13

Callout content 14

Callout content 15

Callout content 16

Callout content 17

Callout content 18

Callout content 19

Callout content 20

Callout content 21

Callout content 22

Callout content 23

Callout content 24

Callout content 25

Callout content 26

Callout content 27

Callout content 28

Callout content 29

Callout content 30

Callout content 31

Callout content 32

Callout content 33

Callout content 34

Callout content 35

Callout content 36

Callout content 37

Callout content 38

Callout content 39

Callout content 40

Callout content 41

Callout content 42

Callout content 43

Callout content 44

Callout content 45

Callout content 46

Callout content 47

Callout content 48

Callout content 49

Callout content 50

Callout content 51

Callout content 52

Callout content 53

Callout content 54

Callout content 55

Callout content 56

Callout content 57

Callout content 58

Callout content 59

Callout content 60

Callout content 61

Callout content 62

Callout content 63

Callout content 64

Callout content 65

Callout content 66

Callout content 67

Callout content 68

Style & Class
Explores styling and class customization for BitCallout, including component styles, custom classes, and detailed style options.

Component's Style & Class:

This is the callout content.

This is the callout content.


Styles & Classes:

This is the callout content.

Show callout
This is the callout content.

API

BitCallout 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.
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 Force the callout to set its content container width while openning it 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.
BitCallout public members
Name
Type
Default value
Description
Toggle Task Toggles the callout to open/close it.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
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.
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.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page