From 10c253471c4e0e6029220c02c325a6c53102ffb9 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Mon, 2 Sep 2024 15:09:55 +0530
Subject: [PATCH] [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           |  4 +++-
 web/core/components/dropdowns/buttons.tsx     |  3 +++
 .../components/dropdowns/module/index.tsx     |  8 ++++++-
 web/core/components/dropdowns/priority.tsx    |  3 +++
 .../issues/issue-layouts/kanban/block.tsx     |  8 +++----
 .../issues/issue-layouts/list/block.tsx       |  4 +++-
 .../properties/all-properties.tsx             | 21 ++++++++++++++++---
 .../issue-layouts/properties/labels.tsx       | 10 ++++++++-
 8 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
index 26e0b2589..75e302577 100644
--- a/packages/ui/src/tooltip/tooltip.tsx
+++ b/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);
diff --git a/web/core/components/dropdowns/buttons.tsx b/web/core/components/dropdowns/buttons.tsx
index 27d47bd85..414099779 100644
--- a/web/core/components/dropdowns/buttons.tsx
+++ b/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(
diff --git a/web/core/components/dropdowns/module/index.tsx b/web/core/components/dropdowns/module/index.tsx
index d436c9bd3..a9c435446 100644
--- a/web/core/components/dropdowns/module/index.tsx
+++ b/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"
diff --git a/web/core/components/dropdowns/priority.tsx b/web/core/components/dropdowns/priority.tsx
index b5485a659..102a92a9b 100644
--- a/web/core/components/dropdowns/priority.tsx
+++ b/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(
diff --git a/web/core/components/issues/issue-layouts/kanban/block.tsx b/web/core/components/issues/issue-layouts/kanban/block.tsx
index 1a31f0e18..0d2380a9f 100644
--- a/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/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"
diff --git a/web/core/components/issues/issue-layouts/list/block.tsx b/web/core/components/issues/issue-layouts/list/block.tsx
index b568f82bf..1b7927878 100644
--- a/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/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>
diff --git a/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index c5666fb70..70e299fdb 100644
--- a/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/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}
diff --git a/web/core/components/issues/issue-layouts/properties/labels.tsx b/web/core/components/issues/issue-layouts/properties/labels.tsx
index f377e2413..6f3704626 100644
--- a/web/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/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"