@engie-group/fluid-design-system-react/lib/components/tooltip/NJTooltip.d.ts

Fluid Design System React

import { OffsetOptions, Side } from '@floating-ui/react';
import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
export type NJTooltipProps = ComponentPropsWithoutRef<'div'> & {
    /**
     * This lets you add distance between the reference and popover content, slightly alter the placement
     */
    offset?: OffsetOptions;
    /**
     * Whether the tooltip has an arrow
     */
    hasArrow?: boolean;
    /**
     * Whether the color is inverse
     * @example: On spotlight context
     */
    isColorInverse?: boolean;
    /**
     * On which side of the anchor, the tooltip should be attached
     */
    placement?: Side;
    /**
     * The content of the tooltip
     */
    text: ReactNode;
    /**
     * On which side of the tooltip, the arrow should be attached. Default value is 'center'
     */
    arrowPlacement?: 'start' | 'center' | 'end';
    /**
     * Whether the tooltip should be displayed
     */
    displayed?: boolean;
    /**
     * Whether the tooltip should be displayed initially
     */
    initialDisplayed?: boolean;
    /**
     * Callback when the tooltip is displayed or hidden
     */
    onDisplay?: (displayed: boolean) => void;
    /**
     * Specifies the time (in milliseconds) to wait before displaying the tooltip when children element is hovered.
     */
    displayDelay?: number;
    /**
     * Specifies the time (in milliseconds) to wait before hiding the tooltip after the user stops hovering over the children element.
     */
    hideDelay?: number;
};
export declare const NJTooltip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    /**
     * This lets you add distance between the reference and popover content, slightly alter the placement
     */
    offset?: OffsetOptions;
    /**
     * Whether the tooltip has an arrow
     */
    hasArrow?: boolean;
    /**
     * Whether the color is inverse
     * @example: On spotlight context
     */
    isColorInverse?: boolean;
    /**
     * On which side of the anchor, the tooltip should be attached
     */
    placement?: Side;
    /**
     * The content of the tooltip
     */
    text: ReactNode;
    /**
     * On which side of the tooltip, the arrow should be attached. Default value is 'center'
     */
    arrowPlacement?: "start" | "center" | "end";
    /**
     * Whether the tooltip should be displayed
     */
    displayed?: boolean;
    /**
     * Whether the tooltip should be displayed initially
     */
    initialDisplayed?: boolean;
    /**
     * Callback when the tooltip is displayed or hidden
     */
    onDisplay?: (displayed: boolean) => void;
    /**
     * Specifies the time (in milliseconds) to wait before displaying the tooltip when children element is hovered.
     */
    displayDelay?: number;
    /**
     * Specifies the time (in milliseconds) to wait before hiding the tooltip after the user stops hovering over the children element.
     */
    hideDelay?: number;
} & React.RefAttributes<HTMLDivElement>>;