New to KendoReactLearn about KendoReact Free.

TooltipProps

Represents the props of the KendoReact Tooltip component.

NameTypeDefaultDescription

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.
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

Specifies a delay in milliseconds before the Tooltip is displayed.

jsx
<Tooltip openDelay={500} />

parentTitle?

boolean

Enables the Tooltip to display the title of any parent element with a title attribute.

jsx
<Tooltip parentTitle={true} />

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.
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

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} />
Not finding the help you need?
Contact Support