@navinc/base-react-components/dist/wayfinder/tooltip/tooltip.d.ts

Nav's Pattern Library

import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { InferComponentProps } from '../../types.js';
import { ReactNode } from 'react';
export declare const TooltipInternal: {
    Provider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
    Root: import("react").FC<TooltipPrimitive.TooltipProps>;
    Trigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
    Content: import("react").ComponentType<TooltipPrimitive.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
    Arrow: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>>;
    Portal: import("react").FC<TooltipPrimitive.TooltipPortalProps>;
};
export type TooltipProps = {
    /** Data shown in the tooltip  */
    content: ReactNode;
    /** Data that needs to be hovered to show the tooltip, the most common way to use this. */
    label?: string | undefined;
    /** Data that needs to be hovered to show the tooltip, probably an icon if you are using this */
    children?: ReactNode | undefined;
    /** If you want this to default to open */
    defaultOpen?: boolean;
    /** Where you want the tooltip to appear */
    side?: 'top' | 'right' | 'bottom' | 'left';
    /** Duration from when the mouse enters a tooltip trigger until the tooltip opens. In ms. */
    delayDuration?: number;
    /** The distance in pixels from the trigger.. */
    sideOffset?: number;
    onOpenChange?: (open: boolean) => void;
    withUnderline?: boolean;
    tooltipTriggerClassName?: string;
    /** Specify a container element to portal the content into. */
    container?: InferComponentProps<typeof TooltipInternal.Portal>['container'];
} & Omit<InferComponentProps<typeof TooltipInternal.Content>, 'content'>;
/** Wayfinder Tooltip
 *
 * Tooltip component that can be used to show additional information when hovering over an element.
 * You can pass in a string as a
 * Note that you will need to make sure the tooltip is inside a `TooltipInternal.Provider` to work correctly.
 *
 * @description The Tooltip component is used to show additional information when hovering over an element.
 *
 * @returns {ReactNode} Tooltip component
 *
 * if you want to use a tooltip with a Copy component inside:
 * @example
 *
 * ```tsx
 * <Tooltip content="This is inside a tooltip!" label="Hover over the me to see the tooltip" />
 * ```
 *
 * if you want to use a tooltip with an Icon component inside:
 * @example
 *
 * ```tsx
 * <Tooltip content="This is inside a tooltip!">
 *   <Icon name="actions/download" />
 * </Tooltip>
 * ```
 *
 * if you pass in nothing, then the default icon will be an info icon:
 * @example
 *
 * ```tsx
 * <Tooltip content="This is inside a tooltip!" />
 * ```
 *
 */
export declare const Tooltip: ({ content, label, children, defaultOpen, side, delayDuration, sideOffset, onOpenChange, withUnderline, tooltipTriggerClassName, container, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;