53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import * as React from 'react'
|
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const TooltipProvider = TooltipPrimitive.Provider
|
|
|
|
const Tooltip = TooltipPrimitive.Root
|
|
|
|
const TooltipTrigger = TooltipPrimitive.Trigger
|
|
|
|
const processTooltipContent = (content: string) => {
|
|
if (typeof content !== 'string') return content
|
|
return (
|
|
<div className="relative top-0 pt-1 whitespace-pre-wrap break-words">
|
|
{content}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const TooltipContent = React.forwardRef<
|
|
React.ComponentRef<typeof TooltipPrimitive.Content>,
|
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
|
|
side?: 'top' | 'right' | 'bottom' | 'left'
|
|
align?: 'start' | 'center' | 'end'
|
|
}
|
|
>(({ className, side = 'left', align = 'start', children, ...props }, ref) => {
|
|
const contentRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
React.useEffect(() => {
|
|
if (contentRef.current) {
|
|
contentRef.current.scrollTop = 0;
|
|
}
|
|
}, [children]);
|
|
|
|
return (
|
|
<TooltipPrimitive.Content
|
|
ref={ref}
|
|
side={side}
|
|
align={align}
|
|
className={cn(
|
|
'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-[60vh] overflow-y-auto whitespace-pre-wrap break-words rounded-md border px-3 py-2 text-sm shadow-md',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{typeof children === 'string' ? processTooltipContent(children) : children}
|
|
</TooltipPrimitive.Content>
|
|
);
|
|
})
|
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName
|
|
|
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|