/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { TooltipEvent, TooltipPositionEvent } from './events';
import { TooltipThemeColor } from './theme-color.type';
import { TooltipPosition, TooltipShowOptions } from './utils.js';
/**
* Represents the props of the [KendoReact Tooltip component](https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip).
*/
export interface TooltipProps {
/**
* Specifies the `id` of the wrapping element of the Tooltip component.
* Used to uniquely identify the Tooltip element in the DOM.
*
* @example
* ```jsx
*
* ```
*/
id?: 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.
*
* @default "pointer"
*
* @example
* ```jsx
*
* ```
*/
anchorElement?: string;
/**
* Defines the container to which the Tooltip will be appended.
* Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
* If set to `null`, the Tooltip will not use React Portal.
*
* @example
* ```jsx
*
* ```
*/
appendTo?: HTMLElement | null;
/**
* Sets the position of the Tooltip ([see example](https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip/positioning)).
*
* 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.
*
* @default "auto"
*
* @example
* ```jsx
*
* ```
*/
position?: TooltipPosition;
/**
* Specifies additional CSS classes for the Tooltip animation container.
*
* @example
* ```jsx
*
* ```
*/
className?: string;
/**
* 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.
*
* @example
* ```jsx
*
* ```
*/
showOption?: TooltipShowOptions;
/**
* Sets the content of the Tooltip ([see example](https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip/templates)).
* Can be a string, JSX, or a function returning JSX.
*
* @example
* ```jsx
*
* ```
*/
content?: any;
/**
* Specifies the children elements of the Tooltip.
* Used to define the content of the Tooltip.
*
* @example
* ```jsx
*
* Hover over me
*
* ```
*/
children?: any;
/**
* Controls the visibility of the Tooltip.
* When set, the Tooltip operates in controlled mode ([see example](https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip/controlled-mode)).
* Requires the `targetElement` property to be set.
*
* @example
* ```jsx
*
* ```
*/
open?: boolean;
/**
* Specifies a delay in milliseconds before the Tooltip is displayed.
*
* @default 400
*
* @example
* ```jsx
*
* ```
*/
openDelay?: number;
/**
* Enables the Tooltip to display the title of any parent element with a `title` attribute.
*
* @default false
*
* @example
* ```jsx
*
* ```
*/
parentTitle?: boolean;
/**
* Determines whether the Tooltip callout (arrow) is displayed.
*
* @default true
*
* @example
* ```jsx
*
* ```
*/
showCallout?: boolean;
/**
* Specifies the starting point of the Tooltip callout when the position is set to `auto`.
* Accepts a pixel value.
*
* @example
* ```jsx
*
* ```
*/
setCalloutOnPositionAuto?: any;
/**
* Specifies the styles applied to the Tooltip animation container.
*
* @example
* ```jsx
*
* ```
*/
style?: React.CSSProperties;
/**
* Specifies the target element for the Tooltip.
* Required when the Tooltip is in controlled mode.
*
* @example
* ```jsx
*
* ```
*/
targetElement?: any;
/**
* Specifies additional CSS classes for the Tooltip DOM element.
*
* @example
* ```jsx
*
* ```
*/
tooltipClassName?: string;
/**
* Specifies the styles applied to the Tooltip DOM element.
*
* @example
* ```jsx
*
* ```
*/
tooltipStyle?: React.CSSProperties;
/**
* Fires when the Tooltip is shown.
* Provides the event details.
*
* @example
* ```jsx
* console.log('Tooltip opened', event)} />
* ```
*/
onOpen?: (event: TooltipEvent) => void;
/**
* Fires when the Tooltip is hidden.
* Provides the event details.
*
* @example
* ```jsx
* console.log('Tooltip closed', event)} />
* ```
*/
onClose?: (event: TooltipEvent) => void;
/**
* Callback function triggered when the Tooltip calculates its position.
* Allows customization of the `top` and `left` position values.
*
* @example
* ```jsx
* ({ top: 100, left: 200 })} />
* ```
*/
onPosition?: (event: TooltipPositionEvent) => {
top: number;
left: number;
};
/**
* Callback function to determine if the Tooltip should be displayed for a specific target element ([see example](https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip/anchor-elements)).
*
* @example
* ```jsx
* target.tagName === 'BUTTON'} />
* ```
*/
filter?: (target: HTMLElement) => void;
/**
* Specifies the interval in milliseconds for the Tooltip to check for title changes.
* By default, the Tooltip does not track title updates.
*
* @example
* ```jsx
*
* ```
*/
updateInterval?: number;
/**
* Configures the `themeColor` of the Tooltip.
*
* The available options are:
* - `base`
* - `inverse`
* - `info`
* - `success`
* - `warning`
* - `error`
*
* @example
* ```jsx
*
* ```
*/
themeColor?: TooltipThemeColor;
}