feat: correct position tooltip and text alignment

libs/shared/lib/components/CardToolTipVis/index.tsx

 import React from 'react';
 import { Icon } from '@graphpolaris/shared/lib/components/icon';
-import { Numbers } from '@mui/icons-material';
+import { Numbers, Close } from '@mui/icons-material';
 import styles from './cardtooltipvis.module.scss';
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
 import {
@@ -11,6 +11,8 @@ import {
   CarbonUndefined,
 } from '@graphpolaris/shared/lib/assets/carbonIcons/carbonIcons';
 
+import { Button } from '@graphpolaris/shared/lib/components/buttons';
+
 export type CardToolTipVisProps = {
   type: string;
   name: string;
@@ -39,12 +41,26 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
   numberOfElements,
 }) => {
   const itemsToShow = Object.entries(data).slice(0, maxVisibleItems);
-  //  shadow-md
+
   return (
     <div className="border-1 border-sec-200 bg-white w-[12rem] -mx-2 -my-1">
       <div className="flex m-0 items-center border-b border-sec-200">
         <div className="h-9 w-2" style={{ backgroundColor: colorHeader }}></div>
-        <span className="text-xl ml-2 font-semibold">{name}</span>
+        <div className="flex-1 min-w-0">
+          <Tooltip>
+            <TooltipTrigger>
+              <span className="text-xl ml-2 font-semibold truncate">{name}</span>
+            </TooltipTrigger>
+            <TooltipContent side={'top'}>
+              <span>{name}</span>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+        {/* 
+        <div className="flex-shrink-0 ml-2">
+          <Button variantType="secondary" variant="ghost" size="xs" rounded={true} iconComponent={<Close />} onClick={() => {}} />
+        </div>
+        */}
       </div>
 
       {type === 'schema' && numberOfElements && (
@@ -81,7 +97,7 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
                 <div className="flex flex-row gap-3 items-center">
                   <span className={`font-semibold truncate ${type === 'schema' ? 'w-[90%]' : 'w-[40%]'}`}>{k}</span>
                   <TooltipTrigger asChild>
-                    <span className="ml-auto text-right truncate w-[60%] min-h-[24px]">
+                    <span className="ml-auto text-right truncate w-[60%] min-h-[24px] flex items-center">
                       {type === 'schema' ? (
                         <Icon
                           className="ml-auto text-right flex-shrink-0"
@@ -113,8 +129,10 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
                     </span>
                   </TooltipTrigger>
                   <TooltipContent side="right">
-                    <div>
-                      <span>{v !== undefined && (typeof v !== 'object' || Array.isArray(v)) && v != '' ? v : 'noData'}</span>
+                    <div className="max-w-[12rem]">
+                      <span className="truncate">
+                        {v !== undefined && (typeof v !== 'object' || Array.isArray(v)) && v != '' ? v : 'noData'}
+                      </span>
                     </div>
                   </TooltipContent>
                 </div>

libs/shared/lib/schema/panel/Schema.tsx

@@ -96,7 +96,6 @@ export const Schema = (props: Props) => {
     const xy = bounds ? { x1: 50, x2: bounds.width - 50, y1: 50, y2: bounds.height - 200 } : { x1: 0, x2: 500, y1: 0, y2: 1000 };
     await layout.current?.layout(expandedSchema, xy);
     const schemaFlow = schemaGraphology2Reactflow(expandedSchema, settings.connectionType, settings.animatedEdges);
-    console.log('SCHEMA ', schemaFlow.nodes);
 
     const nodesWithRef = schemaFlow.nodes.map((node) => ({
       ...node,

libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx

-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 import { SchemaReactflowNodeWithFunctions } from '../../../model/reactflow';
 import { QueryElementTypes } from '@graphpolaris/shared/lib/querybuilder';
@@ -8,8 +8,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@graphpolaris/shared/li
 import { CardToolTipVis, CardToolTipVisProps } from '@graphpolaris/shared/lib/components/CardToolTipVis';
 
 export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<SchemaReactflowNodeWithFunctions>) => {
-  console.log('SchemaEntityPI ', data.reactFlowRef);
-
   const [openPopup, setOpenPopup] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
   /**
@@ -42,31 +40,6 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc
 
   return (
     <>
-      {openPopup && (
-        <Tooltip key={data.name} open={true} boundaryElement={data.reactFlowRef} showArrow={true}>
-          <TooltipTrigger x={data.x} y={data.y} />
-          <TooltipContent side="top">
-            <div>
-              <CardToolTipVis
-                type="schema"
-                typeOfSchema="node"
-                name={data.name}
-                colorHeader="#fb7b04"
-                numberOfElements={1000}
-                data={data.attributes.reduce(
-                  (acc, attr) => {
-                    if (attr.name && attr.type) {
-                      acc[attr.name] = attr.type;
-                    }
-                    return acc;
-                  },
-                  {} as Record<string, string>,
-                )}
-              />
-            </div>
-          </TooltipContent>
-        </Tooltip>
-      )}
       <div
         className="w-fit h-fit"
         onDragStart={(event) => onDragStart(event)}
@@ -78,7 +51,34 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc
           setOpenPopup(!openPopup);
         }}
         draggable
+        ref={ref}
       >
+        {openPopup && (
+          <Tooltip key={data.name} open={true} boundaryElement={data.reactFlowRef} showArrow={true}>
+            <TooltipTrigger />
+            <TooltipContent side="right">
+              <div>
+                <CardToolTipVis
+                  type="schema"
+                  typeOfSchema="node"
+                  name={data.name}
+                  colorHeader="#fb7b04"
+                  numberOfElements={1000}
+                  data={data.attributes.reduce(
+                    (acc, attr) => {
+                      if (attr.name && attr.type) {
+                        acc[attr.name] = attr.type;
+                      }
+                      return acc;
+                    },
+                    {} as Record<string, string>,
+                  )}
+                />
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        )}
+
         <EntityPill
           draggable
           title={id}

libs/shared/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx

@@ -49,46 +49,6 @@ export const SchemaRelationPill = React.memo(({ id, selected, data, ...props }:
   };
   return (
     <>
-      {/* 
-      {openPopup && (
-        <Popup open={openPopup} hAnchor="left" className="-top-8" offset="-20rem">
-          <SchemaRelationshipPopup data={data} onClose={() => setOpenPopup(false)} />
-        </Popup>
-      )}
-        */}
-
-      {openPopup && (
-        <Tooltip key={data.name} open={true} boundaryElement={ref} showArrow={true}>
-          <TooltipTrigger x={data.x} y={data.y} />
-          <TooltipContent side="top">
-            <div>
-              <CardToolTipVis
-                type="schema"
-                typeOfSchema="relationship"
-                name={data.collection}
-                colorHeader="#0676C1"
-                numberOfElements={1000}
-                connectedFrom={data.from}
-                connectedTo={data.to}
-                data={
-                  data.attributes.length > 0
-                    ? data.attributes.reduce(
-                        (acc, attr) => {
-                          if (attr.name && attr.type) {
-                            acc[attr.name] = attr.type;
-                          }
-                          return acc;
-                        },
-                        {} as Record<string, string>,
-                      )
-                    : {}
-                }
-              />
-            </div>
-          </TooltipContent>
-        </Tooltip>
-      )}
-
       <div
         className="w-fit h-fit"
         onDragStart={(event) => onDragStart(event)}
@@ -101,6 +61,37 @@ export const SchemaRelationPill = React.memo(({ id, selected, data, ...props }:
         }}
         draggable
       >
+        {openPopup && (
+          <Tooltip key={data.name} open={true} boundaryElement={ref} showArrow={true}>
+            <TooltipTrigger />
+            <TooltipContent side="top">
+              <div>
+                <CardToolTipVis
+                  type="schema"
+                  typeOfSchema="relationship"
+                  name={data.collection}
+                  colorHeader="#0676C1"
+                  numberOfElements={1000}
+                  connectedFrom={data.from}
+                  connectedTo={data.to}
+                  data={
+                    data.attributes.length > 0
+                      ? data.attributes.reduce(
+                          (acc, attr) => {
+                            if (attr.name && attr.type) {
+                              acc[attr.name] = attr.type;
+                            }
+                            return acc;
+                          },
+                          {} as Record<string, string>,
+                        )
+                      : {}
+                  }
+                />
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        )}
         <RelationPill
           draggable
           title={data.collection}