logo

Tooltip

Examples

The simplest usage of both types of the Tooltip.

expand code expand code

By specifying arrowPointAtCenter prop, the arrow will point to the center of the target element.

expand code expand code

There are 12 placement options available.

expand code expand code

The Tooltip with Icon using TitleTemplate.

expand code expand code

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.
Timeline Tree
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.