TooltipProps

Represents the props of the KendoReact Tooltip component.

Name	Type	Default	Description
anchorElement?	string	"pointer"	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. jsx <Tooltip anchorElement="target" />
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. jsx <Tooltip appendTo={document.getElementById('container')} />
children?	any		Specifies the children elements of the Tooltip. Used to define the content of the Tooltip. jsx <Tooltip> <span>Hover over me</span> </Tooltip>
className?	string		Specifies additional CSS classes for the Tooltip animation container. jsx <Tooltip className="custom-tooltip-class" />
content?	any		Sets the content of the Tooltip (see example). Can be a string, JSX, or a function returning JSX. jsx <Tooltip content="This is a tooltip" />
filter?	(target: HTMLElement) => void		Callback function to determine if the Tooltip should be displayed for a specific target element (see example). jsx <Tooltip filter={(target) => target.tagName === 'BUTTON'} />
id?	string		Specifies the id of the wrapping element of the Tooltip component. Used to uniquely identify the Tooltip element in the DOM. jsx <Tooltip id="tooltip-id" />
onClose?	(event: TooltipEvent) => void		Fires when the Tooltip is hidden. Provides the event details. jsx <Tooltip onClose={(event) => console.log('Tooltip closed', event)} />
onOpen?	(event: TooltipEvent) => void		Fires when the Tooltip is shown. Provides the event details. jsx <Tooltip onOpen={(event) => console.log('Tooltip opened', event)} />
onPosition?	(event: TooltipPositionEvent) => { left: number; top: number; }		Callback function triggered when the Tooltip calculates its position. Allows customization of the top and left position values. jsx <Tooltip onPosition={(event) => ({ top: 100, left: 200 })} />
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. jsx <Tooltip open={true} targetElement={document.getElementById('target')} />
openDelay?	number	400	Specifies a delay in milliseconds before the Tooltip is displayed. jsx <Tooltip openDelay={500} />
parentTitle?	boolean	false	Enables the Tooltip to display the title of any parent element with a title attribute. jsx <Tooltip parentTitle={true} />
position?	TooltipPosition	"auto"	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. jsx <Tooltip position="top" />
setCalloutOnPositionAuto?	any		Specifies the starting point of the Tooltip callout when the position is set to auto. Accepts a pixel value. jsx <Tooltip setCalloutOnPositionAuto="50%" />
showCallout?	boolean	true	Determines whether the Tooltip callout (arrow) is displayed. jsx <Tooltip showCallout={false} />
showOption?	TooltipShowOptions		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. jsx <Tooltip showOption={{ hover: true, click: false }} />
style?	React.CSSProperties		Specifies the styles applied to the Tooltip animation container. jsx <Tooltip style={{ backgroundColor: 'blue' }} />
targetElement?	any		Specifies the target element for the Tooltip. Required when the Tooltip is in controlled mode. jsx <Tooltip targetElement={document.getElementById('target')} />
tooltipClassName?	string		Specifies additional CSS classes for the Tooltip DOM element. jsx <Tooltip tooltipClassName="custom-tooltip" />
tooltipStyle?	React.CSSProperties		Specifies the styles applied to the Tooltip DOM element. jsx <Tooltip tooltipStyle={{ color: 'red' }} />
updateInterval?	number		Specifies the interval in milliseconds for the Tooltip to check for title changes. By default, the Tooltip does not track title updates. jsx <Tooltip updateInterval={1000} />