TooltipProps
Represents the props of the KendoReact Tooltip component.
Definition
Package:@progress/kendo-react-tooltip
Properties
anchorElement?
string
Sets the anchor element of the Tooltip.
The available options are:
- (Default)
pointer—Positions the Tooltip where the cursor is located. target—Positions the Tooltip relative to the target element.
"pointer"
appendTo?
null | HTMLElement
Defines the container to which the Tooltip will be appended.
Defaults to body.
If set to null, the Tooltip will not use React Portal.
children?
any
Specifies the children elements of the Tooltip. Used to define the content of the Tooltip.
className?
string
Specifies additional CSS classes for the Tooltip animation container.
content?
any
Sets the content of the Tooltip (see example). Can be a string, JSX, or a function returning JSX.
filter?
(target: HTMLElement) => void
Callback function to determine if the Tooltip should be displayed for a specific target element (see example).
id?
string
Specifies the id of the wrapping element of the Tooltip component.
Used to uniquely identify the Tooltip element in the DOM.
onClose?
(event: TooltipEvent) => void
Fires when the Tooltip is hidden. Provides the event details.
onOpen?
(event: TooltipEvent) => void
Fires when the Tooltip is shown. Provides the event details.
Callback function triggered when the Tooltip calculates its position.
Allows customization of the top and left position values.
open?
boolean
Controls the visibility of the Tooltip.
When set, the Tooltip operates in controlled mode (see example).
Requires the targetElement property to be set.
openDelay?
number
Specifies a delay in milliseconds before the Tooltip is displayed.
400
parentTitle?
boolean
Enables the Tooltip to display the title of any parent element with a title attribute.
false
position?
TooltipPosition
Sets the position of the Tooltip (see example).
The available options are:
- (Default)
auto—Automatically positions the Tooltip based on available space. right—Positions the Tooltip to the right of the element.left—Positions the Tooltip to the left of the element.bottom—Positions the Tooltip below the element.top—Positions the Tooltip above the element.
"auto"
Specifies the starting point of the Tooltip callout when the position is set to auto.
Accepts a pixel value.
showCallout?
boolean
Determines whether the Tooltip callout (arrow) is displayed.
true
Configures when the Tooltip will be displayed. The available options are:
hover—Displays the Tooltip when the mouse hovers over the target element (default).click—Displays the Tooltip when the target element is clicked.focus—Displays the Tooltip when the target element is focused.keys—Displays the Tooltip when a specific key is pressed while the target element is focused.none—Disables the Tooltip display.
style?
CSSProperties
Specifies the styles applied to the Tooltip animation container.
Specifies the target element for the Tooltip. Required when the Tooltip is in controlled mode.
Configures the themeColor of the Tooltip.
The available options are:
baseinverseinfosuccesswarningerror
tooltipClassName?
string
Specifies additional CSS classes for the Tooltip DOM element.
tooltipStyle?
CSSProperties
Specifies the styles applied to the Tooltip DOM element.
updateInterval?
number
Specifies the interval in milliseconds for the Tooltip to check for title changes. By default, the Tooltip does not track title updates.