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

Nav's Pattern Library

import { type TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip/index.js';
import { IconName } from './icons/index.js';
import { InferComponentProps } from './types.js';
import { ComponentType, ReactNode } from 'react';
type CssProps = {
    /** Default max-width is 500px */
    maxWidth?: string;
    /** Default is 198px. */
    minWidth?: string;
    /** 'Set to "true" if you want a black tooltip with white text. Custom content may need to be styled for the darker background. */
    isDark?: boolean;
};
type TooltipProps = {
    children: ReactNode;
    className?: string;
    iconName?: IconName;
    target?: ReactNode;
    'data-testid'?: string;
    /** Tooltip will place itself, but use this prop if you want to control where it will try to show by default. */
    placement?: 'top' | 'right' | 'bottom' | 'left';
    /** To be used if this is a controlled tooltip. */
    open?: boolean;
    /** Default tooltip has the arrow indictor */
    arrow?: boolean;
    /** Sets the default IconButton size. */
    size?: string;
} & CssProps & Omit<MuiTooltipProps, 'children' | 'title' | 'componentsProps'>;
/** @deprecated use the wayfinder tooltip from @navinc/base-react-components/wayfinder instead */
export declare const TooltipTargetIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<{
    variation?: import("./button.js").VariationKey;
    buttonAriaLabel?: string;
} & Omit<InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("./button.js").StyledButtonProps>> & string>, "size"> & Omit<InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
    name: IconName;
    size?: string;
} & import("react").SVGProps<SVGSVGElement>, never>> & string & Omit<({ name, size, ...props }: {
    name: IconName;
    size?: string;
} & import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element | null, keyof import("react").Component<any, {}, any>>>, "onClick"> & import("react").RefAttributes<HTMLButtonElement>, never>, never>> & string;
/**
 * @deprecated use the wayfinder tooltip from @navinc/base-react-components/wayfinder instead
This is an **uncontrolled** tooltip by default. It will render a _right_ tooltip for desktop and a _top_ tooltip for mobile.

The tooltip will try its best to render in a different placement if it does not fit on the screen, regardless of the `placement` prop.

NOTE: You may need to press the storybook 'remount component' button after changing props in order to rerender Tooltip with updated props.
 **/
export declare const Tooltip: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
    children: ReactNode;
    className?: string;
    iconName?: IconName;
    target?: ReactNode;
    'data-testid'?: string;
    /** Tooltip will place itself, but use this prop if you want to control where it will try to show by default. */
    placement?: "top" | "right" | "bottom" | "left";
    /** To be used if this is a controlled tooltip. */
    open?: boolean;
    /** Default tooltip has the arrow indictor */
    arrow?: boolean;
    /** Sets the default IconButton size. */
    size?: string;
} & CssProps & Omit<MuiTooltipProps, "title" | "children" | "componentsProps">, never>> & string & Omit<({ className, children, iconName, target, "data-testid": dataTestId, arrow, isDark, placement, size, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
/**
 * @example
 * ```
 * const ClickableTooltip = createClickableTooltip(Button, { placement: 'bottom', isDark: true })
 *
 * <ClickableTooltip tooltip="This is my tooltip content" onClick={() => console.log('clicked')}>Click to open a tooltip</ClickableTooltip>
 * ```
 *
 * @deprecated use the wayfinder tooltip from @navinc/base-react-components/wayfinder instead
 */
export declare const createClickableTooltip: <C extends ComponentType<{
    onClick?: (...args: any[]) => void;
    onBlur?: (...args: any[]) => void;
}>>(Component: C, tooltipProps?: Partial<TooltipProps>) => ({ tooltip, ...props }: InferComponentProps<C> & {
    tooltip?: ReactNode;
}) => import("react/jsx-runtime").JSX.Element;
export {};