@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
73 lines (72 loc) • 2.88 kB
TypeScript
import { VariantProps } from 'class-variance-authority';
import { Tooltip as TooltipPrimitive } from 'radix-ui';
import { ComponentProps, ReactNode } from 'react';
export declare const TooltipProvider: import('react').FC<TooltipPrimitive.TooltipProviderProps>;
export declare const TooltipRoot: import('react').FC<TooltipPrimitive.TooltipProps>;
export declare const TooltipTrigger: import('react').ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
export declare const tooltipVariants: {
/**
* Controls the visual variant of the tooltip.
* - `default`: Similar to popover styling. Use for most cases when the tooltip needs to blend with the interface.
* - `inverted`: Inverted color styles. Use when higher contrast is needed or when the tooltip must stand out against busy backgrounds.
*
* @default "default"
*/
variant: {
default: string;
inverted: string;
};
};
export declare const tooltipVariance: (props?: ({
variant?: "default" | "inverted" | null | undefined;
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
export interface TooltipContentProps extends ComponentProps<typeof TooltipPrimitive.Content>, VariantProps<typeof tooltipVariance> {
}
/**
* Main content container for Tooltip.
* Contains Tooltip's inner content.
*
* @example
* ```tsx
* <TooltipContent>
* Tooltip text
* </TooltipContent>
* ```
*/
export declare const TooltipContent: ({ className, sideOffset, variant, ...props }: TooltipContentProps) => import("react").JSX.Element;
export interface TooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Root>, "children" | "delayDuration">, Pick<ComponentProps<typeof TooltipPrimitive.Content>, "sideOffset" | "className" | "side">, VariantProps<typeof tooltipVariance> {
/**
* Slot for the main content that should trigger the Tooltip.
*/
children?: ReactNode;
/**
* Tooltip's content.
*/
tooltip?: ReactNode;
/**
* The duration from when the pointer enters the trigger until the tooltip gets opened.
* @defaultValue 0
*/
delayDuration?: number;
}
/**
* A component that displays additional information when hovering over an element.
* Built on top of [radix-ui Tooltip](https://www.radix-ui.com/primitives/docs/components/tooltip).
*
* For interactive tooltips, see {@link PopoverRoot|Popover}
*
* @example
* ```tsx
* <Tooltip tooltip="Click to save">
* <Button>Save</Button>
* </Tooltip>
* ```
*
* @example
* ```tsx
* <Tooltip variant="inverted" tooltip="High contrast tooltip">
* <Button>Save</Button>
* </Tooltip>
* ```
*/
export declare const Tooltip: ({ children, tooltip, className, sideOffset, side, variant, delayDuration, ...rootProps }: TooltipProps) => import("react").JSX.Element;