@workday/canvas-kit-react/dist/commonjs/tooltip/lib/useTooltip.d.ts

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
/**
 * Convenience hook for creating components with tooltips. It will return an object of properties to mix
 * into a target, popper and tooltip
 */
export declare function useTooltip<T extends Element = Element>({ type, titleText, showDelay, hideDelay, }?: {
    /**
     * Determines the tooltip type for accessibility.
     *
     * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
     *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or
     *   Ellipsis tooltips.
     * - **Deprecated: `describe` is deprecated, please use `description`.**`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional information about the target
     * - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
     *   tooltip contents are not useful to a screen reader or if you have handled accessibility of
     *   the tooltip yourself.
     * - `description`: Sets `aria-description` strings for the wrapped element. Use if the tooltip has additional about the target
     *
     * **Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.
     * Consider an alternate way to inform a user of additional important information.
     * @default 'label'
     */
    type?: 'label' | 'describe' | 'muted' | 'description';
    /**
     * The content of the `aria-label` if `type` is `label.
     */
    titleText?: string;
    /**
     * Amount of time (in ms) to delay before showing the tooltip
     */
    showDelay?: number;
    /**
     * Amount of time (in ms) to delay before hiding the tooltip
     */
    hideDelay?: number;
}): {
    /** Mix these properties into the target element. **Must be an Element** */
    targetProps: {
        'aria-describedby': string | undefined;
        'aria-description': string | undefined;
        'aria-label': string | undefined;
        onMouseEnter: (event: React.SyntheticEvent) => void;
        onMouseLeave: () => void;
        onMouseDown: (event: React.MouseEvent) => void;
        onFocus: (event: React.FocusEvent) => void;
        onBlur: () => void;
    };
    /** Mix these properties into the `Popper` component */
    popperProps: {
        open: boolean;
        anchorElement: T | null;
        ref: React.RefObject<HTMLDivElement>;
    };
    /** Mix these properties into the `TooltipContainer` component */
    tooltipProps: {
        id: string | undefined;
        role: string;
        onMouseEnter: () => void;
        onMouseLeave: () => void;
    };
};
//# sourceMappingURL=useTooltip.d.ts.map