@progress/kendo-react-tooltip 13.3.0 → 13.4.0-develop.1

package/tooltip/Tooltip.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { ZIndexContext } from '@progress/kendo-react-common';
+import { TooltipProps } from './TooltipProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+interface TooltipState {
+    targetElement: HTMLElement | null;
+    open: boolean;
+    title: string;
+}
+/**
+ * Represents the [KendoReact Tooltip component](https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip).
+ *
+ * Accepts properties of type [TooltipProps](https://www.telerik.com/kendo-react-ui/components/tooltip/api/tooltipprops).
+ */
+export declare class Tooltip extends React.PureComponent<TooltipProps, TooltipState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        anchorElement: PropTypes.Requireable<string>;
+        content: PropTypes.Requireable<(...args: any[]) => any>;
+        filter: PropTypes.Requireable<(...args: any[]) => any>;
+        openDelay: PropTypes.Requireable<number>;
+        position: PropTypes.Requireable<string>;
+        updateInterval: PropTypes.Requireable<number>;
+        showOption: PropTypes.Requireable<object>;
+    };
+    /**
+     * The default properties of the Tooltip component.
+     */
+    static defaultProps: {
+        anchorElement: string;
+        openDelay: number;
+        position: string;
+        showCallout: boolean;
+        parentTitle: boolean;
+    };
+    /**
+     * @hidden
+     */
+    static contextType: React.Context<import('@progress/kendo-react-common').ZIndexContextType>;
+    /**
+     * @hidden
+     */
+    context: React.ContextType<typeof ZIndexContext>;
+    /**
+     * @hidden
+     */
+    readonly state: TooltipState;
+    private top;
+    private left;
+    private openTimeoutId?;
+    private updateIntervalId?;
+    private willOpen;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(): void;
+    /**
+     * The method is used on the MouseOut event to hide the Tooltip.
+     *
+     * @param event The mouse event object.
+     */
+    handleMouseOut: (event: any) => void;
+    private compareTargets;
+    private handleEscape;
+    /**
+     * @hidden
+     */
+    handleTargetItemClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    private handleKeyDown;
+    /**
+     * Used on the `MouseOver` event to show the Tooltip.
+     *
+     * @param event The mouse event object.
+     */
+    handleMouseOver: (event: any) => void;
+    /**
+     * @hidden
+     */
+    render(): "" | React.JSX.Element | null;
+    private handleBodyMousemove;
+    private onClose;
+    private showToolTip;
+    private setUpdateInterval;
+    private onIntervalUpdate;
+    private isVisible;
+    private position;
+    private getTitle;
+    private calloutClassName;
+    private getCurrentZIndex;
+}
+export {};

package/tooltip/TooltipProps.d.ts

@@ -0,0 +1,257 @@
+/**
+ * @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.js';
+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
+     * <Tooltip id="tooltip-id" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Sets the anchor element of the Tooltip.
+     *
+     * The available options are:
+     * - (Default) `pointer`&mdash;Positions the Tooltip where the cursor is located.
+     * - `target`&mdash;Positions the Tooltip relative to the target element.
+     *
+     * @default "pointer"
+     *
+     * @example
+     * ```jsx
+     * <Tooltip anchorElement="target" />
+     * ```
+     */
+    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
+     * <Tooltip appendTo={document.getElementById('container')} />
+     * ```
+     */
+    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`&mdash;Automatically positions the Tooltip based on available space.
+     * - `right`&mdash;Positions the Tooltip to the right of the element.
+     * - `left`&mdash;Positions the Tooltip to the left of the element.
+     * - `bottom`&mdash;Positions the Tooltip below the element.
+     * - `top`&mdash;Positions the Tooltip above the element.
+     *
+     * @default "auto"
+     *
+     * @example
+     * ```jsx
+     * <Tooltip position="top" />
+     * ```
+     */
+    position?: TooltipPosition;
+    /**
+     * Specifies additional CSS classes for the Tooltip animation container.
+     *
+     * @example
+     * ```jsx
+     * <Tooltip className="custom-tooltip-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Configures when the Tooltip will be displayed.
+     * The available options are:
+     * - `hover`&mdash;Displays the Tooltip when the mouse hovers over the target element (default).
+     * - `click`&mdash;Displays the Tooltip when the target element is clicked.
+     * - `focus`&mdash;Displays the Tooltip when the target element is focused.
+     * - `keys`&mdash;Displays the Tooltip when a specific key is pressed while the target element is focused.
+     * - `none`&mdash;Disables the Tooltip display.
+     *
+     * @example
+     * ```jsx
+     * <Tooltip showOption={{ hover: true, click: false }} />
+     * ```
+     */
+    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
+     * <Tooltip content="This is a tooltip" />
+     * ```
+     */
+    content?: any;
+    /**
+     * Specifies the children elements of the Tooltip.
+     * Used to define the content of the Tooltip.
+     *
+     * @example
+     * ```jsx
+     * <Tooltip>
+     *   <span>Hover over me</span>
+     * </Tooltip>
+     * ```
+     */
+    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
+     * <Tooltip open={true} targetElement={document.getElementById('target')} />
+     * ```
+     */
+    open?: boolean;
+    /**
+     * Specifies a delay in milliseconds before the Tooltip is displayed.
+     *
+     * @default 400
+     *
+     * @example
+     * ```jsx
+     * <Tooltip openDelay={500} />
+     * ```
+     */
+    openDelay?: number;
+    /**
+     * Enables the Tooltip to display the title of any parent element with a `title` attribute.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Tooltip parentTitle={true} />
+     * ```
+     */
+    parentTitle?: boolean;
+    /**
+     * Determines whether the Tooltip callout (arrow) is displayed.
+     *
+     * @default true
+     *
+     * @example
+     * ```jsx
+     * <Tooltip showCallout={false} />
+     * ```
+     */
+    showCallout?: boolean;
+    /**
+     * Specifies the starting point of the Tooltip callout when the position is set to `auto`.
+     * Accepts a pixel value.
+     *
+     * @example
+     * ```jsx
+     * <Tooltip setCalloutOnPositionAuto="50%" />
+     * ```
+     */
+    setCalloutOnPositionAuto?: any;
+    /**
+     * Specifies the styles applied to the Tooltip animation container.
+     *
+     * @example
+     * ```jsx
+     * <Tooltip style={{ backgroundColor: 'blue' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies the target element for the Tooltip.
+     * Required when the Tooltip is in controlled mode.
+     *
+     * @example
+     * ```jsx
+     * <Tooltip targetElement={document.getElementById('target')} />
+     * ```
+     */
+    targetElement?: any;
+    /**
+     * Specifies additional CSS classes for the Tooltip DOM element.
+     *
+     * @example
+     * ```jsx
+     * <Tooltip tooltipClassName="custom-tooltip" />
+     * ```
+     */
+    tooltipClassName?: string;
+    /**
+     * Specifies the styles applied to the Tooltip DOM element.
+     *
+     * @example
+     * ```jsx
+     * <Tooltip tooltipStyle={{ color: 'red' }} />
+     * ```
+     */
+    tooltipStyle?: React.CSSProperties;
+    /**
+     * Fires when the Tooltip is shown.
+     * Provides the event details.
+     *
+     * @example
+     * ```jsx
+     * <Tooltip onOpen={(event) => console.log('Tooltip opened', event)} />
+     * ```
+     */
+    onOpen?: (event: TooltipEvent) => void;
+    /**
+     * Fires when the Tooltip is hidden.
+     * Provides the event details.
+     *
+     * @example
+     * ```jsx
+     * <Tooltip onClose={(event) => 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
+     * <Tooltip onPosition={(event) => ({ 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
+     * <Tooltip filter={(target) => 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
+     * <Tooltip updateInterval={1000} />
+     * ```
+     */
+    updateInterval?: number;
+}

package/tooltip/events.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { Tooltip } from './Tooltip.js';
+import { TooltipPosition } from './utils.js';
+export interface TooltipEvent extends BaseEvent<Tooltip> {
+}
+export interface TooltipPositionEvent extends BaseEvent<Tooltip> {
+    /**
+     * The Tooltip element. Useful to get the actual `width` and `height` of rendered Tooltip.
+     */
+    element: HTMLDivElement;
+    /**
+     * The current target element. Useful to calculate `top` and `left` position of the Tooltip element.
+     */
+    targetElement: HTMLElement | null;
+    /**
+     * The current mouse `top` position;
+     */
+    mouseTop: number;
+    /**
+     * The current mouse `left` position.
+     */
+    mouseLeft: number;
+    /**
+     * The Tooltip anchor element prop.
+     */
+    anchorElement?: string;
+    /**
+     * The Tooltip position prop.
+     */
+    position?: TooltipPosition;
+}

package/tooltip/utils.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export type TooltipPosition = 'right' | 'left' | 'bottom' | 'top' | 'auto';
+/**
+ * Specifies when the options of the [showTooltip](https://www.telerik.com/kendo-react-ui/components/tooltip/api/tooltipprops#toc-showoption) props.
+ * - `hover`—Shows the Tooltip when the mouse hovers over the target element(Set to `true` by default).
+ * - `click`—Shows the Tooltip when the target element is clicked(Set to `false` by default).
+ * - `focus`—Shows the Tooltip when the target element is focused(Set to `false` by default).
+ * - `keys`—Shows the Tooltip when the target element is focused and a specific key is pressed(Set to `false` by default).
+ * - `none`—Doesn't show the Tooltip(Set to `false` by default).
+ */
+export type TooltipShowOptions = {
+    hover?: boolean;
+    click?: boolean;
+    focus?: boolean;
+    keys?: string[];
+    none?: boolean;
+};
+/**
+ * @hidden
+ */
+export declare const getLeftPosition: (left: any, elementWidth: any, targetElement: any, anchorElement: any, position: any) => any;
+/**
+ * @hidden
+ */
+export declare const getTopPosition: (top: any, targetElement: any, elementHeight: any, anchorElement: any, position: any) => any;
+/**
+ * @hidden
+ */
+export declare const getDomRect: (currentTarget: any) => any;
+/**
+ * @hidden
+ */
+export declare const toolTipSelectors: string[];
+/**
+ * @hidden
+ */
+export declare const isTooltipElement: (element: any) => boolean;