vega-frontend-monorepo/apps/trading/components/tooltip/tooltip.tsx

77 lines
2.0 KiB
TypeScript
Raw Normal View History

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>;
};