7b3fbafa50
* feat: add tooltip * refactor: lint happy * chore: lint --------- Co-authored-by: Derek Chen <derex1987@gmail.com>
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import clsx from 'clsx';
|
|
import type { PropsWithChildren, ReactNode } from 'react';
|
|
import React from 'react';
|
|
|
|
interface TooltipProps {
|
|
className?: string;
|
|
contentClassName?: string;
|
|
content: ReactNode;
|
|
offsetX: number;
|
|
offsetY: number;
|
|
maxWidth?: number;
|
|
}
|
|
|
|
/**
|
|
* Tooltip that displays content on hover
|
|
*/
|
|
export default function Tooltip({
|
|
className,
|
|
contentClassName,
|
|
content,
|
|
offsetX,
|
|
offsetY,
|
|
maxWidth,
|
|
children,
|
|
}: PropsWithChildren<TooltipProps>): JSX.Element {
|
|
return (
|
|
<span className={clsx('relative inline-flex group', className)}>
|
|
{children}
|
|
<span
|
|
className={clsx(
|
|
'pointer-events-none absolute rounded-md bg-white px-3 py-2 text-xs invisible opacity-0 transition-opacity group-hover:visible group-hover:opacity-100 whitespace-normal break-words',
|
|
contentClassName
|
|
)}
|
|
style={{
|
|
marginTop: offsetY,
|
|
marginLeft: offsetX,
|
|
maxWidth,
|
|
}}
|
|
>
|
|
{content}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|