fix: Update AutoToolTipComponent to use right position

app/client/src/widgets/TableWidgetV2/component/Constants.ts

@@ -151,6 +151,9 @@ export interface InlineEditingCellProperties {
 export interface CellWrappingProperties {
   allowCellWrapping: boolean;
 }
+export interface DisableTooltipProperties {
+  disableTooltip: boolean;
+}
 
 export interface ButtonCellProperties {
   buttonVariant: ButtonVariant;
@@ -222,6 +225,7 @@ export interface CellLayoutProperties
   extends EditActionCellProperties,
     InlineEditingCellProperties,
     CellWrappingProperties,
+    DisableTooltipProperties,
     ButtonCellProperties,
     URLCellProperties,
     MenuButtonCellProperties,
@@ -285,6 +289,7 @@ export interface ColumnBaseProperties {
   isAscOrder?: boolean;
   alias: string;
   allowCellWrapping: boolean;
+  disableTooltip: boolean;
 }
 
 export interface ColumnStyleProperties {
@@ -497,6 +502,7 @@ export interface BaseCellComponentProps {
   compactMode: string;
   isHidden: boolean;
   allowCellWrapping?: boolean;
+  disableTooltip?: boolean;
   horizontalAlignment?: CellAlignment;
   verticalAlignment?: VerticalAlignment;
   cellBackground?: string;

app/client/src/widgets/TableWidgetV2/component/cellComponents/AutoToolTipComponent.tsx

@@ -1,10 +1,10 @@
-import React, { createRef, useEffect, useState } from "react";
 import { Tooltip } from "@blueprintjs/core";
-import { CellWrapper, TooltipContentWrapper } from "../TableStyledWrappers";
-import type { CellAlignment, VerticalAlignment } from "../Constants";
+import { importSvg } from "design-system-old";
+import React, { createRef, useEffect, useState } from "react";
 import styled from "styled-components";
 import { ColumnTypes } from "widgets/TableWidgetV2/constants";
-import { importSvg } from "design-system-old";
+import type { CellAlignment, VerticalAlignment } from "../Constants";
+import { CellWrapper, TooltipContentWrapper } from "../TableStyledWrappers";
 
 const OpenNewTabIcon = importSvg(
   async () => import("assets/icons/control/open-new-tab.svg"),
@@ -37,8 +37,8 @@ const TOOLTIP_OPEN_DELAY = 500;
 
 function useToolTip(
   children: React.ReactNode,
-  tableWidth?: number,
   title?: string,
+  disableTooltip?: boolean,
 ) {
   const ref = createRef<HTMLDivElement>();
   const [requiresTooltip, setRequiresTooltip] = useState(false);
@@ -54,7 +54,11 @@ function useToolTip(
        * during initial render
        */
       timeout = setTimeout(() => {
-        if (element && element.offsetWidth < element.scrollWidth) {
+        const requiresTooltip =
+          !disableTooltip &&
+          element &&
+          element.offsetWidth < element.scrollWidth;
+        if (requiresTooltip) {
           setRequiresTooltip(true);
         } else {
           setRequiresTooltip(false);
@@ -82,13 +86,11 @@ function useToolTip(
   return requiresTooltip && children ? (
     <Tooltip
       autoFocus={false}
-      boundary="viewport"
       content={
         <TooltipContentWrapper width={MAX_WIDTH - WIDTH_OFFSET}>
           {title}
         </TooltipContentWrapper>
       }
-      defaultIsOpen
       hoverOpenDelay={TOOLTIP_OPEN_DELAY}
       position="bottom"
       usePortal
@@ -116,6 +118,7 @@ interface Props {
   className?: string;
   compactMode?: string;
   allowCellWrapping?: boolean;
+  disableTooltip?: boolean;
   horizontalAlignment?: CellAlignment;
   verticalAlignment?: VerticalAlignment;
   textColor?: string;
@@ -128,7 +131,7 @@ interface Props {
 }
 
 function LinkWrapper(props: Props) {
-  const content = useToolTip(props.children, props.tableWidth, props.title);
+  const content = useToolTip(props.children, props.title, props.disableTooltip);
 
   return (
     <CellWrapper
@@ -160,7 +163,7 @@ function LinkWrapper(props: Props) {
 }
 
 function AutoToolTipComponent(props: Props) {
-  const content = useToolTip(props.children, props.tableWidth, props.title);
+  const content = useToolTip(props.children, props.title, props.disableTooltip);
 
   if (props.columnType === ColumnTypes.URL && props.title) {
     return <LinkWrapper {...props} />;

app/client/src/widgets/TableWidgetV2/component/cellComponents/BasicCell.tsx

@@ -99,6 +99,7 @@ export const BasicCell = React.forwardRef(
       compactMode,
       disabledEditIcon,
       disabledEditIconMessage,
+      disableTooltip,
       fontStyle,
       hasUnsavedChanges,
       horizontalAlignment,
@@ -143,6 +144,7 @@ export const BasicCell = React.forwardRef(
           className={isCellEditable ? "editable-cell" : ""}
           columnType={columnType}
           compactMode={compactMode}
+          disableTooltip={disableTooltip}
           fontStyle={fontStyle}
           horizontalAlignment={horizontalAlignment}
           isCellDisabled={isCellDisabled}

app/client/src/widgets/TableWidgetV2/component/cellComponents/PlainTextCell.tsx

@@ -118,6 +118,7 @@ function PlainTextCell(
     decimals,
     disabledEditIcon,
     disabledEditIconMessage,
+    disableTooltip,
     displayText,
     fontStyle,
     hasUnsavedChanges,
@@ -299,6 +300,7 @@ function PlainTextCell(
         cellBackground={cellBackground}
         columnType={columnType}
         compactMode={compactMode}
+        disableTooltip={disableTooltip}
         disabledEditIcon={disabledEditIcon}
         disabledEditIconMessage={disabledEditIconMessage}
         fontStyle={fontStyle}

app/client/src/widgets/TableWidgetV2/component/header/actions/Utilities.test.ts

@@ -29,6 +29,7 @@ describe("TransformTableDataIntoArrayOfArray", () => {
         isCellEditable: false,
         isEditable: false,
         allowCellWrapping: false,
+        disableTooltip: false,
       },
     },
   ];

app/client/src/widgets/TableWidgetV2/widget/index.tsx

@@ -2497,6 +2497,7 @@ class TableWidgetV2 extends BaseWidget<TableWidgetProps, WidgetState> {
             compactMode={compactMode}
             currencyCode={cellProperties.currencyCode}
             decimals={cellProperties.decimals}
+            disableTooltip={cellProperties.disableTooltip}
             disabledEditIcon={
               shouldDisableEdit || this.props.isAddRowInProgress
             }

app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/General.ts

@@ -105,6 +105,27 @@ export default {
         ]);
       },
     },
+    {
+      propertyName: "disableTooltip",
+      dependencies: ["primaryColumns", "columnType"],
+      label: "Disable tooltip",
+      helpText: "Hides tooltip on cell hover",
+      defaultValue: false,
+      controlType: "SWITCH",
+      customJSControl: "TABLE_COMPUTE_VALUE",
+      isJSConvertible: true,
+      isBindProperty: true,
+      isTriggerProperty: false,
+      validation: {
+        type: ValidationTypes.ARRAY_OF_TYPE_OR_TYPE,
+        params: {
+          type: ValidationTypes.BOOLEAN,
+        },
+      },
+      hidden: (props: TableWidgetProps, propertyPath: string) => {
+        return hideByColumnType(props, propertyPath, [ColumnTypes.TEXT]);
+      },
+    },
     {
       propertyName: "isCellEditable",
       dependencies: [

app/client/src/widgets/TableWidgetV2/widget/utilities.ts

@@ -225,6 +225,7 @@ export function getDefaultColumnProperties(
     decimals: 0,
     thousandSeparator: true,
     notation: "standard" as Intl.NumberFormatOptions["notation"],
+    disableTooltip: false,
   };
 
   return columnProps;
@@ -523,6 +524,10 @@ export const getCellProperties = (
         rowIndex,
       ),
       notation: getPropertyValue(columnProperties.notation, rowIndex, true),
+      disableTooltip: getBooleanPropertyValue(
+        columnProperties.disableTooltip,
+        rowIndex,
+      ),
     } as CellLayoutProperties;
   }
   return {} as CellLayoutProperties;