fix(Tooltip): fix truncated content and add scrollbar in property tooltips

lightrag_webui/src/components/graph/PropertiesView.tsx

@@ -138,7 +138,7 @@ const PropertyRow = ({
         className="hover:bg-primary/20 rounded p-1 text-ellipsis"
         tooltipClassName="max-w-80"
         text={value}
-        tooltip={tooltip || value}
+        tooltip={tooltip || (typeof value === 'string' ? value : JSON.stringify(value, null, 2))}
         side="left"
         onClick={onClick}
       />

lightrag_webui/src/components/ui/Tooltip.tsx

@@ -10,30 +10,43 @@ const TooltipTrigger = TooltipPrimitive.Trigger
 
 const processTooltipContent = (content: string) => {
   if (typeof content !== 'string') return content
-  return content.split('\\n').map((line, i) => (
-    <React.Fragment key={i}>
-      {line}
-      {i < content.split('\\n').length - 1 && <br />}
-    </React.Fragment>
-  ))
+  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>
->(({ className, sideOffset = 4, children, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    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 z-50 mx-1 max-w-sm overflow-hidden rounded-md border px-3 py-2 text-sm shadow-md',
-      className
-    )}
-    {...props}
-  >
-    {typeof children === 'string' ? processTooltipContent(children) : children}
-  </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 }