mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-01-23 03:07:05 +00:00
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import * as Tooltip from '@radix-ui/react-tooltip';
|
|
import type { ReactNode } from 'react';
|
|
|
|
interface ToolTipProps {
|
|
tooltip: string;
|
|
children: ReactNode | ReactNode[];
|
|
sideOffset?: number;
|
|
className?: string;
|
|
arrowClassName?: string;
|
|
tooltipStyle?: any; //TODO better type
|
|
}
|
|
|
|
const WithTooltip = ({
|
|
tooltip,
|
|
children,
|
|
sideOffset = 5,
|
|
className = '',
|
|
arrowClassName = '',
|
|
tooltipStyle = {},
|
|
}: ToolTipProps) => {
|
|
return (
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content
|
|
className={`bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg ${className}`}
|
|
sideOffset={sideOffset}
|
|
style={{ zIndex: 2000, backgroundColor: 'white', ...tooltipStyle }}
|
|
>
|
|
{tooltip}
|
|
<Tooltip.Arrow className={`fill-bolt-elements-tooltip-background ${arrowClassName}`} />
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
);
|
|
};
|
|
|
|
export default WithTooltip;
|