[WEB-2365] fix: Misaligned tooltips in few components (#5486)

* fix mis-aligned tooltips in few components

* fix tooltip for kanban title

packages/ui/src/tooltip/tooltip.tsx

@@ -30,6 +30,7 @@ interface ITooltipProps {
   openDelay?: number;
   closeDelay?: number;
   isMobile?: boolean;
+  renderByDefault?: boolean;
 }
 
 export const Tooltip: React.FC<ITooltipProps> = ({
@@ -42,10 +43,11 @@ export const Tooltip: React.FC<ITooltipProps> = ({
   openDelay = 200,
   closeDelay,
   isMobile = false,
+  renderByDefault = true,
 }) => {
   const toolTipRef = useRef<HTMLDivElement | null>(null);
 
-  const [shouldRender, setShouldRender] = useState(false);
+  const [shouldRender, setShouldRender] = useState(renderByDefault);
 
   const onHover = () => {
     setShouldRender(true);

web/core/components/dropdowns/buttons.tsx

@@ -58,6 +58,7 @@ const BorderButton: React.FC<ButtonProps> = (props) => {
       tooltipContent={tooltipContent}
       disabled={!showTooltip}
       isMobile={isMobile}
+      renderByDefault={false}
     >
       <div
         className={cn(
@@ -81,6 +82,7 @@ const BackgroundButton: React.FC<ButtonProps> = (props) => {
       tooltipContent={tooltipContent}
       disabled={!showTooltip}
       isMobile={isMobile}
+      renderByDefault={false}
     >
       <div
         className={cn(
@@ -103,6 +105,7 @@ const TransparentButton: React.FC<ButtonProps> = (props) => {
       tooltipContent={tooltipContent}
       disabled={!showTooltip}
       isMobile={isMobile}
+      renderByDefault={false}
     >
       <div
         className={cn(

web/core/components/dropdowns/module/index.tsx

@@ -102,12 +102,18 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
                       tooltipContent={moduleDetails?.name}
                       disabled={!showTooltip}
                       isMobile={isMobile}
+                      renderByDefault={false}
                     >
                       <span className="max-w-40 flex-grow truncate text-xs font-medium">{moduleDetails?.name}</span>
                     </Tooltip>
                   )}
                   {!disabled && (
-                    <Tooltip tooltipContent="Remove" disabled={!showTooltip} isMobile={isMobile}>
+                    <Tooltip
+                      tooltipContent="Remove"
+                      disabled={!showTooltip}
+                      isMobile={isMobile}
+                      renderByDefault={false}
+                    >
                       <button
                         type="button"
                         className="flex-shrink-0"

web/core/components/dropdowns/priority.tsx

@@ -76,6 +76,7 @@ const BorderButton = (props: ButtonProps) => {
       tooltipContent={priorityDetails?.title ?? "None"}
       disabled={!showTooltip}
       isMobile={isMobile}
+      renderByDefault={false}
     >
       <div
         className={cn(
@@ -156,6 +157,7 @@ const BackgroundButton = (props: ButtonProps) => {
       tooltipContent={priorityDetails?.title ?? "None"}
       disabled={!showTooltip}
       isMobile={isMobile}
+      renderByDefault={false}
     >
       <div
         className={cn(
@@ -237,6 +239,7 @@ const TransparentButton = (props: ButtonProps) => {
       tooltipContent={priorityDetails?.title ?? "None"}
       disabled={!showTooltip}
       isMobile={isMobile}
+      renderByDefault={false}
     >
       <div
         className={cn(

web/core/components/issues/issue-layouts/kanban/block.tsx

@@ -84,11 +84,11 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
         </div>
       </WithDisplayPropertiesHOC>
 
-      <div className="w-full line-clamp-1 text-sm text-custom-text-100 mb-1.5">
-        <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
+      <Tooltip tooltipContent={issue.name} isMobile={isMobile} renderByDefault={false}>
+        <div className="w-full line-clamp-1 text-sm text-custom-text-100">
           <span>{issue.name}</span>
-        </Tooltip>
-      </div>
+        </div>
+      </Tooltip>
 
       <IssueProperties
         className="flex flex-wrap items-center gap-2 whitespace-nowrap text-custom-text-300 pt-1.5"

web/core/components/issues/issue-layouts/list/block.tsx

@@ -171,6 +171,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                   </>
                 }
                 disabled={issue.project_id === projectId}
+                renderByDefault={false}
               >
                 <div className="flex-shrink-0 grid place-items-center w-3.5">
                   <MultipleSelectEntityAction
@@ -229,6 +230,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
               isMobile={isMobile}
               position="top-left"
               disabled={isCurrentBlockDragging}
+              renderByDefault={false}
             >
               <p className="truncate">{issue.name}</p>
             </Tooltip>
@@ -242,7 +244,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
               className="w-full truncate cursor-pointer text-sm text-custom-text-100"
               disabled={!!issue?.tempId}
             >
-              <Tooltip tooltipContent={issue.name} isMobile={isMobile} position="top-left">
+              <Tooltip tooltipContent={issue.name} isMobile={isMobile} position="top-left" renderByDefault={false}>
                 <p className="truncate">{issue.name}</p>
               </Tooltip>
             </ControlLink>

web/core/components/issues/issue-layouts/properties/all-properties.tsx

@@ -437,7 +437,12 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         displayPropertyKey="sub_issue_count"
         shouldRenderProperty={(properties) => !!properties.sub_issue_count && !!subIssueCount}
       >
-        <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${subIssueCount}`} isMobile={isMobile}>
+        <Tooltip
+          tooltipHeading="Sub-issues"
+          tooltipContent={`${subIssueCount}`}
+          isMobile={isMobile}
+          renderByDefault={false}
+        >
           <div
             onClick={(e) => {
               e.stopPropagation();
@@ -463,7 +468,12 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         displayPropertyKey="attachment_count"
         shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count}
       >
-        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`} isMobile={isMobile}>
+        <Tooltip
+          tooltipHeading="Attachments"
+          tooltipContent={`${issue.attachment_count}`}
+          isMobile={isMobile}
+          renderByDefault={false}
+        >
           <div
             className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"
             onClick={handleEventPropagation}
@@ -480,7 +490,12 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         displayPropertyKey="link"
         shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count}
       >
-        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`} isMobile={isMobile}>
+        <Tooltip
+          tooltipHeading="Links"
+          tooltipContent={`${issue.link_count}`}
+          isMobile={isMobile}
+          renderByDefault={false}
+        >
           <div
             className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"
             onClick={handleEventPropagation}

web/core/components/issues/issue-layouts/properties/labels.tsx

@@ -162,6 +162,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                   tooltipHeading="Labels"
                   tooltipContent={label?.name ?? ""}
                   isMobile={isMobile}
+                  renderByDefault={false}
                 >
                   <div
                     key={label?.id}
@@ -196,6 +197,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                 ?.filter((l) => value.includes(l?.id))
                 .map((l) => l?.name)
                 .join(", ")}
+              renderByDefault={false}
             >
               <div className="flex h-full items-center gap-1.5 text-custom-text-200">
                 <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
@@ -205,7 +207,13 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           </div>
         )
       ) : (
-        <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None" isMobile={isMobile}>
+        <Tooltip
+          position="top"
+          tooltipHeading="Labels"
+          tooltipContent="None"
+          isMobile={isMobile}
+          renderByDefault={false}
+        >
           <div
             className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
               noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"