@progress/kendo-react-tooltip/index.d.ts

React Tooltips library represents popups with information that is related to a UI element. KendoReact Tooltips package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 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 { CollisionType } from '@progress/kendo-react-popup';
import { default as default_2 } from 'prop-types';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { Margin } from '@progress/kendo-react-popup';
import { Offset } from '@progress/kendo-react-popup';
import { PopupAnimation } from '@progress/kendo-react-popup';
import { PositionMode } from '@progress/kendo-react-popup';
import * as React_2 from 'react';
import { ZIndexContext } from '@progress/kendo-react-common';
import { ZIndexContextType } from '@progress/kendo-react-common';

/**
 * Represents the Popover component.
 */
export declare const Popover: React_2.ForwardRefExoticComponent<PopoverProps & React_2.RefAttributes<PopoverHandle | null>>;

/**
 * Represents the PopoverActionsBar component.
 */
export declare const PopoverActionsBar: React_2.ForwardRefExoticComponent<PopoverActionsBarProps & React_2.RefAttributes<PopoverActionsBarHandle | null>>;

/**
 * Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the PopoverActionBar component.
 */
export declare interface PopoverActionsBarHandle {
    /**
     * The props of the PopoverActionsBar.
     */
    props: PopoverActionsBarProps;
    /**
     * The current element or `null` if there is none.
     */
    element: HTMLDivElement | null;
}

/**
 * Represents the props of the [KendoReact PopoverActionsBar]({% slug api_tooltip_popoveractionsbar %}) component.
 */
export declare interface PopoverActionsBarProps {
    /**
     * Sets the horizontal alignment of the PopoverActionsBar buttons.
     *
     * The possible values are:
     * * `start`
     * * `center`
     * * `end`
     * * `stretched` (default)
     */
    alignment?: string;
    /**
     * Sets the orientation of the PopoverActionsBar buttons.
     *
     * The possible values are:
     * * `horizontal` (default)
     * * `vertical`
     */
    orientation?: string;
    /**
     * @hidden
     */
    children?: React.ReactNode;
}

/**
 * The animation settings of the Popover.
 */
export declare interface PopoverAnimation extends PopupAnimation {
}

/**
 * Represents the object of the `Close` Popover event.
 */
export declare interface PopoverCloseEvent {
    /**
     * An event target.
     */
    target: PopoverHandle;
}

/**
 * Defines the horizontal and vertical collision behavior of the Popover.
 */
export declare interface PopoverCollision {
    /**
     * Defines the horizontal collision behavior of the Popover.
     */
    horizontal: PopoverCollisionType;
    /**
     * Defines the vertical collision behavior of the Popover.
     */
    vertical: PopoverCollisionType;
}

/**
 * Defines the possible collision behavior when the Popover is not fully visible.
 *
 * The available options are:
 * - `fit`&mdash;Moves the Popover horizontally until it is fully displayed in the viewport.
 * - `flip`&mdash;Flips the Popover position based on the origin and the position properties.
 * - `none`&mdash;The Popover is rendered at its original position. Usable when the Popover is focused on open and the page is scrolled to it.
 */
export declare type PopoverCollisionType = CollisionType;

/**
 * Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the Popover component.
 */
export declare interface PopoverHandle {
    /**
     * The props of the Popover.
     */
    props: PopoverProps;
}

/**
 * Represents the object of the `KeyDown` Popover event.
 */
export declare interface PopoverKeyDownEvent {
    /**
     * An event target.
     */
    target: PopoverHandle;
    /**
     * A boolean value that indicates whether the Popover is visible.
     */
    show?: boolean;
}

/**
 * Defines the horizontal and the vertical margin offset of the component.
 */
export declare interface PopoverMargin extends Margin {
    /**
     * Defines the possible horizontal margin value.
     */
    horizontal: number;
    /**
     * Defines the possible vertical margin value.
     */
    vertical: number;
}

/**
 * The offset position of the Popover.
 */
export declare interface PopoverOffset extends Offset {
    /**
     * Defines the top position of the Popover.
     */
    top: number;
    /**
     * Defines the left position of the Popover.
     */
    left: number;
}

/**
 * Represents the object of the `Open` Popover event.
 */
export declare interface PopoverOpenEvent {
    /**
     * An event target.
     */
    target: PopoverHandle;
}

/**
 * The position of the Popover.
 * The available options are:
 * - `top`
 * - `left`
 * - `bottom`
 * - `right`
 */
export declare type PopoverPosition = 'top' | 'left' | 'bottom' | 'right';

/**
 * Represents the object of the `Position` Popover event.
 */
export declare interface PopoverPositionEvent {
    /**
     * An event target.
     */
    target: PopoverHandle;
    /**
     * Indicates if the position is fitted.
     */
    fitted: boolean;
    /**
     * Indicates if the position is flipped.
     */
    flipped: boolean;
}

/**
 * The type which defines all possible position modes of the Popover.
 */
export declare type PopoverPositionMode = PositionMode;

export declare interface PopoverProps {
    /**
     * Specifies the title of the Popover component.
     */
    title?: React.ReactNode;
    /**
     * Specifies the position of the Popover element relative to the current anchor or offset.
     */
    position?: PopoverPosition;
    /**
     * Controls the Popover callout element. If set to `false`, the callout element will not be rendered.
     */
    callout?: boolean;
    /**
     * Controls the Popover animation. By default, the opening and closing animations are enabled.
     */
    animate?: boolean | PopoverAnimation;
    /**
     * Specifies the element which will be used as an anchor. The Popover opens next to that element.
     */
    anchor?: HTMLElement | null;
    /**
     * Defines the container to which the Popover will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
     * * If set to `null` the Popover will be rendered without React Portal.
     */
    appendTo?: HTMLElement | null;
    /**
     * Configures the collision behavior of the Popover. By default, it's set to `none`.
     */
    collision?: PopoverCollision;
    /**
     * Configures the margin value that will be added to the Popover dimensions
     * in pixels and leaves a blank space between the Popover and the anchor.
     * By default, it's automatically set based on the Popover position prop.
     *
     */
    margin?: PopoverMargin;
    /**
     * Specifies the position mode of the component. By default, the Popover uses fixed positioning.
     * To make the Popover acquire absolute positioning, set this option to `absolute`.
     *
     * > If you need to support mobile browsers with the zoom option, use the `absolute` positioning of the Popover.
     */
    positionMode?: PopoverPositionMode;
    /**
     * Used to set the document scale when using a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
     *
     * The document or container scale is required to compute the popover position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE.
     *
     * > Using this token is not necessary for user-applied browser zoom.
     *
     */
    scale?: number;
    /**
     * Specifies the absolute position of the element.
     * The Popover opens next to that point. The pivot point of the Popover is defined by the `position` configuration option.
     * The boundary detection is applied by using the window viewport.
     */
    offset?: PopoverOffset;
    /**
     * Specifies a list of CSS classes that will be added to the internal animated element.
     */
    popoverClass?: string | Array<string> | {
        [key: string]: boolean;
    };
    /**
     * Specifies a list of CSS classes that will be added to the Popover element.
     */
    className?: string | Array<string>;
    /**
     * Specifies the id that will be added to the Popover element.
     */
    id?: string;
    /**
     * Represents the styles that are applied to the Popover.
     */
    style?: React.CSSProperties;
    /**
     * Represents the styles that are applied to the content element of the Popover.
     */
    contentStyle?: React.CSSProperties;
    /**
     * Controls the Popover visibility. Defaults to `false`.
     */
    show?: boolean;
    /**
     * Fires after the Popover is opened and the opening animation ends.
     */
    onOpen?: (event: PopoverOpenEvent) => void;
    /**
     * Fires after the Popover is closed.
     */
    onClose?: (event: PopoverCloseEvent) => void;
    /**
     * Fires after the Popover position is set.
     */
    onPosition?: (event: PopoverPositionEvent) => void;
    /**
     * Fires when the Popover is focused and a key is pressed.
     */
    onKeyDown?: (event: PopoverKeyDownEvent) => void;
    /**
     * @hidden
     */
    children?: React.ReactNode;
}

export declare class Tooltip extends React_2.PureComponent<TooltipProps, TooltipState> {
    /**
     * @hidden
     */
    static propTypes: {
        anchorElement: default_2.Requireable<string>;
        content: default_2.Requireable<(...args: any[]) => any>;
        filter: default_2.Requireable<(...args: any[]) => any>;
        openDelay: default_2.Requireable<number>;
        position: default_2.Requireable<string>;
        updateInterval: default_2.Requireable<number>;
        showOption: default_2.Requireable<object>;
    };
    static defaultProps: {
        anchorElement: string;
        openDelay: number;
        position: string;
        showCallout: boolean;
        parentTitle: boolean;
    };
    /**
     * @hidden
     */
    static contextType: React_2.Context<ZIndexContextType>;
    /**
     * @hidden
     */
    context: React_2.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.
     */
    handleMouseOut: (event: any) => void;
    private compareTargets;
    private handleEscape;
    /**
     * @hidden
     */
    handleTargetItemClick: (event: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    private handleKeyDown;
    /**
     * Used on the `MouseOver` event to show the Tooltip.
     */
    handleMouseOver: (event: any) => void;
    /**
     * @hidden
     */
    render(): "" | JSX_2.Element | null;
    private handleBodyMousemove;
    private onClose;
    private showToolTip;
    private setUpdateInterval;
    private onIntervalUpdate;
    private isVisible;
    private position;
    private getTitle;
    private calloutClassName;
    private getCurrentZIndex;
}

export declare interface TooltipEvent extends BaseEvent<Tooltip> {
}

/**
 * @hidden
 */
export declare type TooltipPosition = 'right' | 'left' | 'bottom' | 'top' | 'auto';

export declare 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;
}

/**
 * Represents the props of the [KendoReact Tooltip component]({% slug overview_tooltip %}).
 */
export declare interface TooltipProps {
    /**
     * Specifies the `id` of the wrapping element of the Tooltip component.
     */
    id?: string;
    /**
     * Sets the anchor element of the Tooltip.
     *
     * The available options are:
     * - (Default) `pointer`&mdash;Shows a Tooltip where the cursor is located.
     * - `target`&mdash;Positions the Tooltip based on the anchor element.
     */
    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).
     */
    appendTo?: HTMLElement | null;
    /**
     * Sets the position of the Tooltip ([see example]({% slug positioning_tooltip %})).
     *
     * The available options are:
     * - (Default) `auto`&mdash;Positions the Tooltip depending on the available space.
     * - `right`&mdash;Positions the Tooltip to the right side of the element.
     * - `left`&mdash;Positions the Tooltip to the left side of the element.
     * - `bottom`&mdash;Positions the Tooltip at the bottom of the element.
     * - `top`&mdash;Positions the Tooltip at the top of the element.
     */
    position?: TooltipPosition;
    /**
     * Sets a class of the Tooltip animation container.
     */
    className?: string;
    /**
     * Specifies when the Тooltip will be rendered.
     * The available options are:
     * - `hover`&mdash;Shows the Tooltip when the mouse hovers over the target element(Set to `true` by default).
     * - `click`&mdash;Shows the Tooltip when the target element is clicked(Set to `false` by default).
     * - `focus`&mdash;Shows the Tooltip when the target element is focused(Set to `false` by default).
     * - `keys`&mdash;Shows the Tooltip when the target element is focused and a specific key is pressed(Set to `false` by default).
     * - `none`&mdash;Doesn't show the Tooltip(Set to `false` by default).
     */
    showOption?: TooltipShowOptions;
    /**
     * Sets the content of the Tooltip ([see example]({% slug templates_tooltip %})).
     */
    content?: any;
    /**
     * Sets the content of the Tooltip.
     */
    children?: any;
    /**
     * Specifies if the Tooltip will be open.
     * Sets the Tooltip in its controlled mode ([see example]({% slug controlledmode_tooltip %})).
     * Requires you to set the `targetElement` property.
     */
    open?: boolean;
    /**
     * Sets a delay in milliseconds.
     */
    openDelay?: number;
    /**
     * If any of the parent elements has a title, displays a Tooltip.
     */
    parentTitle?: boolean;
    /**
     * Specifies if the Tooltip callout will be displayed.
     */
    showCallout?: boolean;
    /**
     * When the position is set to `auto`, sets the start point of the Tooltip callout (in pixels).
     */
    setCalloutOnPositionAuto?: any;
    /**
     * Specifies the styles which are set to the Tooltip animation container.
     */
    style?: React.CSSProperties;
    /**
     * Sets the Tooltip target element. You have to use it with the `open` property.
     */
    targetElement?: any;
    /**
     * Specifies the CSS class names which are set to the Tooltip DOM element.
     */
    tooltipClassName?: string;
    /**
     * Specifies the styles which are set to the Tooltip DOM element.
     */
    tooltipStyle?: React.CSSProperties;
    /**
     * Fires when the Tooltip is shown.
     */
    onOpen?: (event: TooltipEvent) => void;
    /**
     * Fires when the Tooltip is hidden.
     */
    onClose?: (event: TooltipEvent) => void;
    /**
     * 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.
     */
    onPosition?: (event: TooltipPositionEvent) => {
        top: number;
        left: number;
    };
    /**
     * Represents a callback function which determines if a Tooltip will be displayed ([see example]({% slug filter_elements_tooltip %})).
     */
    filter?: (target: HTMLElement) => void;
    /**
     * The milliseconds interval on which the Tooltip will check for title change. By default the Tooltip does not track for title updates.
     */
    updateInterval?: number;
}

/**
 * Specifies when the options of the [showTooltip](slug:api_tooltip_tooltipprops#toc-showoption) props.
 * - `hover`&mdash;Shows the Tooltip when the mouse hovers over the target element(Set to `true` by default).
 * - `click`&mdash;Shows the Tooltip when the target element is clicked(Set to `false` by default).
 * - `focus`&mdash;Shows the Tooltip when the target element is focused(Set to `false` by default).
 * - `keys`&mdash;Shows the Tooltip when the target element is focused and a specific key is pressed(Set to `false` by default).
 * - `none`&mdash;Doesn't show the Tooltip(Set to `false` by default).
 */
declare type TooltipShowOptions = {
    hover?: boolean;
    click?: boolean;
    focus?: boolean;
    keys?: string[];
    none?: boolean;
};

/**
 * @hidden
 */
declare interface TooltipState {
    targetElement: HTMLElement | null;
    open: boolean;
    title: string;
}

export { }