Ant Design Blazor
Tooltip
A simple text popup tip.
When To Use
- The tip is shown on mouse enter, and is hidden on mouse leave. The
Tooltipdoesn't support complex text or operations. - To provide an explanation of a
button/text/operation. It's often used instead of the htmltitleattribute.
Two types
There are 2 rendering approaches for Tooltip:
- Wraps child element (content of the
Tooltip) with a<div>(default approach). - Child element is not wrapped with anything. This approach requires usage of
<Unbound>tag inside<Tooltip>and depending on the child element type (please refer to the first example):- html tag: has to have its
@refset to@context.Current Ant Design Blazorcomponent: has to have itsRefBackattribute set to@context.
- html tag: has to have its
Examples
The simplest usage of both types of the Tooltip.
By specifying arrowPointAtCenter prop, the arrow will point to the center of the target element.
There are 12 placement options available.
The Tooltip with Icon using TitleTemplate.
Tooltip API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Title | ParameterThe text shown in the tooltip | String | -- |
| TitleTemplate | ParameterContent shown in the tooltip | RenderFragment | -- |
| ArrowPointAtCenter | ParameterWhether the arrow is pointed at the center of target | Boolean | false |
| MouseEnterDelay | ParameterDelay in seconds, before tooltip is shown on mouse enter | Double | 0.1 |
| MouseLeaveDelay | ParameterDelay in seconds, before tooltip is hidden on mouse leave | Double | 0.1 |
| TabIndex | ParameterTab index of the tooltip | Int32 | 0 |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening). Check enum for details. | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
| ChildContent | ParameterTrigger (link, button, etc) | RenderFragment | -- |
| ComplexAutoCloseAndVisible | ParameterWhether need both auto-off and Visible control closing. | Boolean | false |
| Disabled | ParameterWhether the trigger is disabled. | Boolean | false |
| HiddenMode | ParameterProperty forwarded to Overlay component. Consult the Overlay property for more detailed explanation. | Boolean | false |
| InlineFlexMode | Parameter(not used in Unbound) Sets wrapping div style to `display: inline-flex;`. | Boolean | false |
| IsButton | ParameterBehave like a button: when clicked invoke OnClick (unless OnClickDiv is overriden and does not call base). | Boolean | false |
| OnClick | ParameterCallback when triggger is clicked | EventCallback<MouseEventArgs> | -- |
| OnMaskClick | ParameterCallback - equivalent of OnMouseUp event on the trigger trigger. | EventCallback | -- |
| OnMouseEnter | ParameterCallback when mouse enters trigger boundaries. | EventCallback | -- |
| OnMouseLeave | ParameterCallback when mouse leaves trigger boundaries. | EventCallback | -- |
| OnOverlayHiding | ParameterCallback when overlay is hiding. | EventCallback<Boolean> | -- |
| OnVisibleChange | ParameterCallback when overlay visibility is changing.Use VisibleChanged instead Obsolete Will be removed in a future version. |
EventCallback<Boolean> | -- |
| Overlay | ParameterOverlay content (what will be rendered after trigger is activated) | RenderFragment | -- |
| OverlayClassName | ParameterOverlay container custom css class. | String | -- |
| OverlayEnterCls | ParameterCss class added to overlay when overlay is shown. | String | -- |
| OverlayHiddenCls | ParameterCss class added to overlay when overlay is hidden. | String | -- |
| OverlayLeaveCls | ParameterCss class added to overlay when overlay is hiding. | String | -- |
| OverlayStyle | ParameterCss style that will be added to overlay div. | String | -- |
| Placement | ParameterThe position of the Dropdown overlay relative to the target. Can be: Top, Left, Right, Bottom, TopLeft, TopRight, BottomLeft, BottomRight, LeftTop, LeftBottom, RightTop, RightBottom | Placement | PlacementType.BottomLeft |
| PlacementCls | ParameterOverride default placement class which is based on `Placement` parameter. | String | -- |
| PopupContainerSelector | ParameterDefine what is going to be the container of the overlay. Example use case: when overlay has to be contained in a scrollable area. | String | body |
| Trigger | ParameterTrigger mode. Could be multiple by passing an array. | Trigger[] | TriggerType.Hover |
| TriggerCls | ParameterThe trigger element CSS class. | String | ant-dropdown-trigger |
| TriggerReference | ParameterManually set reference to triggering element. | ElementReference | -- |
| Unbound | ParameterChildElement with ElementReference set to avoid wrapping div. | RenderFragment<ForwardRef> | -- |
| Visible | ParameterToggles overlay viability. | Boolean | false |
| VisibleChanged | ParameterCallback when visibility is changed. | EventCallback<Boolean> | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| Close() | Task | Will hide the overlay. |
| IsOverlayShow() | Boolean | Checks if overlay is currently in visible state. |
| SetVisible(Boolean visible) | void | Toggle overlay visibility. |