45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import {
|
|
Tooltip as AriaTooltip,
|
|
TooltipProps as AriaTooltipProps,
|
|
OverlayArrow,
|
|
composeRenderProps,
|
|
} from 'react-aria-components';
|
|
|
|
import { tv } from 'tailwind-variants';
|
|
import { OverlayArrowIcon } from '../icons';
|
|
|
|
const style = tv({
|
|
base: 'group/tooltip px-2 py-1.5 max-w-[200px] drop-shadow-modal rounded text-sm',
|
|
variants: {
|
|
bgColor: {
|
|
white: 'bg-white [&_svg]:fill-white',
|
|
tertiary: 'bg-primary-tertiary [&_svg]:fill-primary-tertiary',
|
|
},
|
|
},
|
|
});
|
|
|
|
export interface TooltipProps extends Omit<AriaTooltipProps, 'children'> {
|
|
bgColor?: 'white' | 'tertiary';
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function Tooltip({ children, ...props }: TooltipProps) {
|
|
const { className, bgColor = 'white', offset = 10, ...restProps } = props;
|
|
|
|
return (
|
|
<AriaTooltip
|
|
offset={offset}
|
|
{...restProps}
|
|
className={composeRenderProps(className, (className, renderProps) =>
|
|
style({ ...renderProps, className, bgColor })
|
|
)}
|
|
>
|
|
<OverlayArrow>
|
|
<OverlayArrowIcon className="block group-data-[placement=bottom]/tooltip:rotate-180 group-data-[placement=left]/tooltip:-rotate-90 group-data-[placement=right]/tooltip:rotate-90" />
|
|
</OverlayArrow>
|
|
<span className="block max-h-[200px] overflow-y-auto whitespace-pre-wrap">{children}</span>
|
|
</AriaTooltip>
|
|
);
|
|
}
|