From cd56268f1e10938a5e54993aab7f81829f63e1b4 Mon Sep 17 00:00:00 2001
From: audreyostrom <audrey@mysorbet.xyz>
Date: Thu, 5 Dec 2024 09:48:45 -0800
Subject: [PATCH] Fix: Tooltip Not Appearing for "Add Section Title" (#144)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# [SRBT-349] Fix: Tooltip Not Appearing for "Add Section Title"

**Changes**

- Refactored the SectionTitleIcon to be wrapped in a `div` instead of an
`svg`. I also refactored the Tooltip Trigger for section titles to be a
button. Apparently, Tooltips can only to appear on
[buttons](https://github.com/radix-ui/primitives/issues/955#issuecomment-960610209),
or elements that require a click / pointer-down interaction – from what
I've gathered on the documentation beyond this specific GitHub issue.

# Screenshots

<img width="487" alt="Screenshot 2024-12-03 at 8 57 21 AM"
src="https://github.com/user-attachments/assets/a1a38d3f-075c-46b7-9064-a0b581efcf5a">

---------

Co-authored-by: Audrey Ostrom <audreyostrom64@gmail.com>
---
 .../profile/widgets/add-widgets.tsx           | 112 +++++++++---------
 1 file changed, 57 insertions(+), 55 deletions(-)

diff --git a/src/components/profile/widgets/add-widgets.tsx b/src/components/profile/widgets/add-widgets.tsx
index 3a895038..c0028747 100644
--- a/src/components/profile/widgets/add-widgets.tsx
+++ b/src/components/profile/widgets/add-widgets.tsx
@@ -204,20 +204,24 @@ export const AddWidgets: React.FC<AddWidgetsProps> = ({
         </div>
 
         <div className='flex items-center gap-2'>
-          <TooltipProvider>
-            {featureFlags.sectionTitles && (
+          {featureFlags.sectionTitles && (
+            <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <SectionTitleIcon
+                  <Button
+                    variant='ghost'
+                    className='h-fit p-0'
                     onClick={addSectionTitle}
-                    className='hover:text-sorbet'
-                    width={20}
-                    height={20}
-                  />
+                    disabled={loading}
+                  >
+                    <SectionTitleIcon className='hover:text-sorbet size-5' />
+                  </Button>
                 </TooltipTrigger>
                 <TooltipContent>Add section title</TooltipContent>
               </Tooltip>
-            )}
+            </TooltipProvider>
+          )}
+          <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <label
@@ -247,55 +251,53 @@ export const AddWidgets: React.FC<AddWidgetsProps> = ({
 
 /** Local component for achieving purple effect on a custom icon */
 interface SectionTitleIconProps {
-  onClick?: () => void;
   className?: string;
-  width?: number | string; // Allow dynamic width
-  height?: number | string; // Allow dynamic height
 }
-const SectionTitleIcon: React.FC<SectionTitleIconProps> = ({
-  onClick,
-  className,
-  width = 20,
-  height = 20,
-}) => {
+const SectionTitleIcon: React.FC<SectionTitleIconProps> = ({ className }) => {
   return (
-    <svg
-      onClick={onClick}
-      width={width}
-      height={height}
-      viewBox='0 0 20 20'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={`group cursor-pointer transition-colors ${className}`}
-    >
-      <rect
-        x='1'
-        y='1'
-        width='18'
-        height='18'
-        rx='3'
-        stroke='currentColor'
-        strokeWidth='2'
-      />
-      <rect x='3.5' y='4.75' width='10' height='2' rx='1' fill='currentColor' />
-      <rect
-        x='3.5'
-        y='9.25'
-        width='6'
-        height='6'
-        rx='2'
-        fill='#A8A8A8'
-        className='group-hover:fill-current'
-      />
-      <rect
-        x='10.5'
-        y='9.25'
-        width='6'
-        height='6'
-        rx='2'
-        fill='#A8A8A8'
-        className='group-hover:fill-current'
-      />
-    </svg>
+    <div>
+      <svg
+        viewBox='0 0 20 20'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+        className={`group cursor-pointer transition-colors ${className}`}
+      >
+        <rect
+          x='1'
+          y='1'
+          width='18'
+          height='18'
+          rx='3'
+          stroke='currentColor'
+          strokeWidth='2'
+        />
+        <rect
+          x='3.5'
+          y='4.75'
+          width='10'
+          height='2'
+          rx='1'
+          fill='currentColor'
+        />
+        <rect
+          x='3.5'
+          y='9.25'
+          width='6'
+          height='6'
+          rx='2'
+          fill='#A8A8A8'
+          className='group-hover:fill-current'
+        />
+        <rect
+          x='10.5'
+          y='9.25'
+          width='6'
+          height='6'
+          rx='2'
+          fill='#A8A8A8'
+          className='group-hover:fill-current'
+        />
+      </svg>
+    </div>
   );
 };