What is KendoReact
    Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Grid
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Knowledge Base
    Changelog
Components / Tooltips / API / TooltipProps / 

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—Shows a Tooltip where the cursor is located.
  • target—Positions the Tooltip based on the anchor element.

appendTo?

"null" | HTMLElement

Defines the container to which the Tooltip will be appended. Defaults to body.

children?

any

Sets the content of the Tooltip.

className?

string

Sets a class of the Tooltip animation container.

content?

any

Sets the content of the Tooltip (see example).

open?

boolean

Specifies if the Tooltip will be open. Sets the Tooltip in its controlled mode (see example). Requires you to set the targetElement property.

openDelay?

number

Sets a delay in milliseconds.

parentTitle?

boolean

If any of the parent elements has a title, displays a Tooltip.

position?

TooltipPosition

Sets the position of the Tooltip (see example).

The available options are:

  • (Default) auto—Positions the Tooltip depending on the available space.
  • right—Positions the Tooltip to the right side of the element.
  • left—Positions the Tooltip to the left side of the element.
  • bottom—Positions the Tooltip at the bottom of the element.
  • top—Positions the Tooltip at the top of the element.

setCalloutOnPositionAuto?

any

When the position is set to auto, sets the start point of the Tooltip callout (in pixels).

showCallout?

boolean

Specifies if the Tooltip callout will be displayed.

style?

React.CSSProperties

Specifies the styles which are set to the Tooltip animation container.

targetElement?

any

Sets the Tooltip target element. You have to use it with the open property.

tooltipClassName?

string

Specifies the CSS class names which are set to the Tooltip DOM element.

tooltipStyle?

React.CSSProperties

Specifies the styles which are set to the Tooltip DOM element.

updateInterval?

number

The milliseconds interval on which the Tooltip will check for title change. By default the Tooltip does not track for title updates.

Methods

filter

Represents a callback function which determines if a Tooltip will be displayed (see example).

Parameters

target

HTMLElement

onClose

Fires when the Tooltip is hidden.

Parameters

event

TooltipEvent

onOpen

Fires when the Tooltip is shown.

Parameters

event

TooltipEvent

onPosition

Callback called when the Tooltip calculates it's position. Useful to modify the default position behavior. Require to return the top and left position of the Tooltip.

Parameters

event

TooltipPositionEvent

Returns

{ left: number; top: number; }

In this article

Not finding the help you need?

Contact Support