@itwin/itwinui-react/esm/core/Tooltip/Tooltip.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { FloatingDelayGroup, Placement } from '@floating-ui/react';
import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
export declare const defaultTooltipDelay: React.ComponentPropsWithoutRef<typeof FloatingDelayGroup>['delay'];
type TooltipOptions = {
    /**
     * Placement of the Tooltip
     * @default 'top'
     */
    placement?: Placement;
    /**
     * Property for manual visibility control
     */
    visible?: boolean;
    /**
     * Callback invoked every time the tooltip visibility changes as a result
     * of internal logic. Should be used alongside `visible` prop.
     */
    onVisibleChange?: (visible: boolean) => void;
    /**
     * autoUpdate options that recalculates position
     * to ensure the floating element remains anchored
     * to its reference element, such as when scrolling
     * and resizing the screen.
     *
     * @see [floating-ui docs](https://floating-ui.com/docs/autoUpdate#options)
     */
    autoUpdateOptions?: {
        ancestorScroll?: boolean;
        ancestorResize?: boolean;
        elementResize?: boolean;
        /**
         * Use this if you want Tooltip to follow moving trigger element
         */
        animationFrame?: boolean;
        layoutShift?: boolean;
    };
    /**
     * Tooltip middleware options.
     *
     * @see [floating-ui docs](https://floating-ui.com/docs/middleware)
     */
    middleware?: {
        offset?: number;
        flip?: boolean;
        shift?: boolean;
        size?: boolean;
        autoPlacement?: boolean;
        hide?: boolean;
        inline?: boolean;
    };
    /**
     * Sets reference point to user provided element.
     * @example
     * const [trigger, setTrigger] = React.useState(null);
     * ...
     * <Button ref={setTrigger} />
     * <Tooltip content='tooltip text' reference={trigger} />
     */
    reference?: HTMLElement | null;
    /**
     * By default, the tooltip will be associated with the reference element
     * using `aria-describedby`.
     *
     * Pass "label" if you want to use `aria-labelledby` instead, or pass "none"
     * if you don't want any association.
     *
     * @default 'description'
     */
    ariaStrategy?: 'description' | 'label' | 'none';
    id?: string;
};
type TooltipOwnProps = {
    /**
     * Content of the tooltip.
     */
    content: React.ReactNode;
    /**
     * Element to have tooltip on. Has to be a valid JSX element and needs to forward its ref.
     * If not specified, the `reference` prop should be used instead.
     */
    children?: React.ReactNode;
} & PortalProps;
/**
 * Basic tooltip component to display informative content when an element is hovered or focused.
 * Uses [FloatingUI](https://floating-ui.com/).
 * @example
 * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
 * @example
 * const [trigger, setTrigger] = React.useState(null);
 * ...
 * <Button ref={setTrigger} />
 * <Tooltip content='tooltip text' reference={trigger} />
 */
export declare const Tooltip: PolymorphicForwardRefComponent<"div", TooltipOwnProps & TooltipOptions>;
export {};