From 08ca63ba97889cfd708fe4dabfdf7ed2ac79c71d Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 24 Feb 2022 14:08:37 +0800
Subject: [PATCH] Fix missing tooltip in table side panel editor

---
 .../TableEditor/ColumnManagement.tsx          | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
index bd348f6f356..e736545b4b7 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
@@ -17,6 +17,7 @@ import {
   DroppableProvided,
   DraggableProvided,
 } from 'react-beautiful-dnd'
+import * as Tooltip from '@radix-ui/react-tooltip'
 
 import Column from './Column'
 import InformationBox from 'components/ui/InformationBox'
@@ -192,29 +193,37 @@ const ColumnManagement: FC<Props> = ({
             {/* Drag handle */}
             {isNewRecord && <div className="w-[5%]" />}
             <div className="w-[25%]">
-              <h5 className="text-xs text-scale-900" small>
-                Name
-              </h5>
+              <h5 className="text-xs text-scale-900">Name</h5>
             </div>
             <div className="w-[25%]">
-              <h5 className="text-xs text-scale-900" small>
-                Type
-              </h5>
+              <h5 className="text-xs text-scale-900">Type</h5>
             </div>
             <div className={`${isNewRecord ? 'w-[25%]' : 'w-[30%]'} flex items-center space-x-2`}>
-              <h5 className="text-xs text-scale-900" small>
-                Default Value
-              </h5>
-              <div>
-                <h5 className="text-xs text-scale-900">
-                  <IconHelpCircle size={15} strokeWidth={1.5} />
-                </h5>
-              </div>
+              <h5 className="text-xs text-scale-900">Default Value</h5>
+
+              <Tooltip.Root delayDuration={0}>
+                <Tooltip.Trigger>
+                  <h5 className="text-xs text-scale-900">
+                    <IconHelpCircle size={15} strokeWidth={1.5} />
+                  </h5>
+                </Tooltip.Trigger>
+                <Tooltip.Content side="bottom">
+                  <Tooltip.Arrow className="radix-tooltip-arrow" />
+                  <div
+                    className={[
+                      'bg-scale-100 shadow py-1 px-2 rounded leading-none', // background
+                      'border border-scale-200 ', //border
+                    ].join(' ')}
+                  >
+                    <span className="text-scale-1200 text-xs">
+                      Can be either a value or a SQL expression
+                    </span>
+                  </div>
+                </Tooltip.Content>
+              </Tooltip.Root>
             </div>
             <div className="w-[10%]">
-              <h5 className="text-xs text-scale-900" small>
-                Primary
-              </h5>
+              <h5 className="text-xs text-scale-900">Primary</h5>
             </div>
             {/* Empty space */}
             <div className={`${hasImportContent ? 'w-[10%]' : 'w-0'}`} />