File size: 1,528 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import { Tooltip, TooltipProps } from "@heroui/react";
import React, { ReactNode } from "react";
import { cn } from "#/utils/utils";
export interface StyledTooltipProps {
children: ReactNode;
content: string | ReactNode;
tooltipClassName?: React.HTMLAttributes<HTMLDivElement>["className"];
placement?: TooltipProps["placement"];
showArrow?: boolean;
closeDelay?: number;
offset?: number;
shouldFlip?: boolean;
isOpen?: TooltipProps["isOpen"];
}
function getTooltipTriggerChild(children: ReactNode) {
if (React.Children.count(children) === 1 && React.isValidElement(children)) {
return children;
}
return <span className="inline-flex">{children}</span>;
}
export function StyledTooltip({
children,
content,
tooltipClassName,
placement = "right",
showArrow = false,
closeDelay = 100,
shouldFlip,
offset = 7,
isOpen,
}: StyledTooltipProps) {
const disableAnimation = import.meta.env.MODE === "test";
return (
<Tooltip
content={content}
closeDelay={closeDelay}
placement={placement}
offset={offset}
shouldFlip={shouldFlip}
isOpen={isOpen}
className={cn("bg-white text-black", tooltipClassName)}
showArrow={showArrow}
disableAnimation={disableAnimation}
classNames={{
content: cn(
"z-[9999] rounded-md px-2 py-1 text-xs font-medium shadow-md",
"!bg-white !text-black",
tooltipClassName,
),
}}
>
{getTooltipTriggerChild(children)}
</Tooltip>
);
}
|