77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
|
import type { ReactNode } from 'react';
|
||
|
|
import React from 'react';
|
||
|
|
import {
|
||
|
|
Provider,
|
||
|
|
Root,
|
||
|
|
Trigger,
|
||
|
|
Content,
|
||
|
|
Portal,
|
||
|
|
Arrow,
|
||
|
|
} from '@radix-ui/react-tooltip';
|
||
|
|
import type { ITooltipParams } from 'ag-grid-community';
|
||
|
|
|
||
|
|
const tooltipContentClasses =
|
||
|
|
'max-w-sm bg-vega-clight-500 dark:bg-vega-cdark-500 px-2 py-1 z-20 rounded text-default break-word';
|
||
|
|
export interface TooltipProps {
|
||
|
|
children: React.ReactElement;
|
||
|
|
description?: string | ReactNode;
|
||
|
|
open?: boolean;
|
||
|
|
align?: 'start' | 'center' | 'end';
|
||
|
|
side?: 'top' | 'right' | 'bottom' | 'left';
|
||
|
|
sideOffset?: number;
|
||
|
|
delayDuration?: number;
|
||
|
|
arrow?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Conditionally rendered tooltip if description content is provided.
|
||
|
|
export const Tooltip = ({
|
||
|
|
children,
|
||
|
|
description,
|
||
|
|
open,
|
||
|
|
sideOffset,
|
||
|
|
align = 'start',
|
||
|
|
side = 'bottom',
|
||
|
|
delayDuration = 200,
|
||
|
|
arrow = true,
|
||
|
|
}: TooltipProps) =>
|
||
|
|
description ? (
|
||
|
|
<Provider delayDuration={delayDuration} skipDelayDuration={100}>
|
||
|
|
<Root open={open}>
|
||
|
|
<Trigger
|
||
|
|
asChild
|
||
|
|
className="underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed"
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Trigger>
|
||
|
|
{description && (
|
||
|
|
<Portal>
|
||
|
|
<Content
|
||
|
|
align={align}
|
||
|
|
side={side}
|
||
|
|
alignOffset={8}
|
||
|
|
className={tooltipContentClasses}
|
||
|
|
sideOffset={sideOffset}
|
||
|
|
>
|
||
|
|
<div className="relative z-0" data-testid="tooltip-content">
|
||
|
|
{description}
|
||
|
|
</div>
|
||
|
|
{arrow && (
|
||
|
|
<Arrow
|
||
|
|
width={16}
|
||
|
|
height={8}
|
||
|
|
className="fill-vega-clight-500 dark:fill-vega-cdark-500"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</Content>
|
||
|
|
</Portal>
|
||
|
|
)}
|
||
|
|
</Root>
|
||
|
|
</Provider>
|
||
|
|
) : (
|
||
|
|
children
|
||
|
|
);
|
||
|
|
|
||
|
|
export const TooltipCellComponent = (props: ITooltipParams) => {
|
||
|
|
return <p className={tooltipContentClasses}>{props.value}</p>;
|
||
|
|
};
|