@intility/bifrost-react/dist/components/Tooltip/Tooltip.d.ts

React library for Intility's design system, Bifrost.

export type TooltipState = TooltipProps["state"];
export type TooltipVariant = TooltipProps["variant"];
export type TooltipProps = {
    /** Content inside the tooltip */
    content: React.ReactNode;
    /** Reference to the element that the tooltip will anchor to, and attaches
     click events to toggle the tooltip. For controlled mode, no click events are
     * attached. */
    reference?: React.RefObject<Element | null> | Element | null;
    /** Available variants: 'basic', and 'compact' */
    variant?: "basic" | "compact";
    /** Available states: 'default', and 'neutral' */
    state?: "default" | "neutral";
    /** CSS Class name(s) */
    className?: string;
    /** Content to anchor the tooltip to and attaches hover and focus events to
     * toggle the tooltip. Can optionally be supplied via `reference` prop
     * instead. For controlled mode, no events are attached. */
    children?: React.ReactElement;
    /** Control the open state of the tooltip. Can be overridden by options.open
     */
    visible?: boolean;
    /** The tooltip can be placed "top", "right", "bottom", or "left" and
     * optionally suffixed with "-start" or "-end". Default is "bottom-start".
     * @link https://floating-ui.com/docs/computePosition#placement */
    placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
    /** Triggers when tooltip opens. (For controlled mode, does nothing) */
    onShow?: () => void;
    /** Triggers when tooltip closes. (For controlled mode, triggers when user
     * presses esc or clicks outside) */
    onHide?: () => void;
    /** Style the tooltip using `"absolute"` (default) or `"fixed"` CSS position.
     * If it looks sluggish or jumpy on scroll, try changing your strategy.
     * @link https://floating-ui.com/docs/computePosition#strategy
     */
    strategy?: "fixed" | "absolute";
    /** Disable the tooltip */
    disabled?: boolean;
    /** Array of two numbers with `skidding` (cross axis) and `distance` (main
     * axis) - default `[0, 10]` */
    offset?: [skidding: number, distance: number];
};
/**
 * Display a tooltip on hover
 * The nested content of `<Tooltip>` needs to be a single element able to hold
 * a `ref`, unless an element reference is passed to the `reference` prop.
 * @example
 * <Tooltip content="Good job hovering!" placement="right">
 *  <span>Hover me</span>
 * </Tooltip>
 */
export default function Tooltip({ reference, children, className, content, visible, onShow, onHide, state, variant, placement, strategy, disabled, offset: offsetProp, }: TooltipProps): import("react/jsx-runtime").JSX.Element | undefined;