Tooltip
Tooltip component briefly describes unlabeled controls or provides a bit of additional information about labeled controls.
Usage
Basic
Explore the fundamental use of BitTooltip with a simple hover interaction on a BitButton.
This is the tooltip text
Position
You can customize the Tooltip position to enhance the user experience.
Text
Text
Text
Text
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Component's Style & Class:
Item 1
Item 2
Item 3
This is the tooltip text
Styles & Classes:
This is the tooltip text
This is the tooltip text
Custom content
Here are some examples of customizing the tooltip content.
- 1. One
- 2. Two
RTL
- ۱. یک
- ۲. دو
Advanced
Here are some examples of advanced usage of tooltip.
Text
Top
Implementation
BitTooltip parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
Anchor | RenderFragment? | null | Child content of component, the content that the Tooltip will apply to. |
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. |
DefaultIsShown | bool | false | Default value of the IsShown. |
HideArrow | bool | false | Hides the arrow of tooltip. |
HideDelay | int | 0 | Delay (in milliseconds) before hiding the tooltip. |
IsShown | bool | false | The visibility state of the tooltip. |
IsShownChanged | EventCallback<bool> | ||
Position | BitTooltipPosition | BitTooltipPosition.Top | The position of tooltip around its anchor. |
Template | RenderFragment? | null | The content you want inside the tooltip. |
Text | string? | null | The text of tooltip to show. |
ShowOnClick | bool | false | Determines shows tooltip on click. |
ShowDelay | int | 0 | Delay (in milliseconds) before showing the tooltip. |
ShowOnFocus | bool | false | Determines shows tooltip on focus. |
ShowOnHover | bool | true | Determines shows tooltip on hover. |
Styles | BitTooltipClassStyles? | null | Custom CSS styles for different parts of the BitTooltip. |
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. |
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. |
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 |
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. |