From c380f32c35ca908eeee06745cfdbc3c78906bb98 Mon Sep 17 00:00:00 2001
From: Kiran Patel <kiranpatel11@gmail.com>
Date: Thu, 4 Feb 2021 09:04:23 +1100
Subject: [PATCH] feat(overflowtooltip): add text as default title for tooltip

---
 .../OverflowTooltip.stories.tsx               | 26 +++++++++++++++++--
 .../OverflowTooltip/OverflowTooltip.tsx       |  8 +++---
 .../ApiExplorerTable/ApiExplorerTable.tsx     |  2 +-
 .../components/CatalogTable/CatalogTable.tsx  |  2 +-
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx
index df6aba5cad..e0cbe7c814 100644
--- a/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx
+++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx
@@ -13,14 +13,36 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Box } from '@material-ui/core';
 import React from 'react';
 import { OverflowTooltip } from './OverflowTooltip';
 
+export default {
+  title: 'Data Display/OverflowTooltip',
+  component: OverflowTooltip,
+};
+
 const text =
   'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
 
-export const Default = () => <OverflowTooltip title={text} text={text} />;
+export const Default = () => (
+  <Box maxWidth="200px">
+    <OverflowTooltip text={text} />
+  </Box>
+);
 
 export const MultiLine = () => (
-  <OverflowTooltip title={text} text={text} line={2} />
+  <Box maxWidth="200px">
+    <OverflowTooltip text={text} line={2} />
+  </Box>
+);
+
+export const DifferentTitle = () => (
+  <Box maxWidth="200px">
+    <OverflowTooltip
+      title="Visit loremipsum.io for more info"
+      text={text}
+      line={2}
+    />
+  </Box>
 );
diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx
index 02a45372f2..715f84503e 100644
--- a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx
+++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx
@@ -19,11 +19,11 @@ import React, { useState } from 'react';
 import TextTruncate, { TextTruncateProps } from 'react-text-truncate';
 
 type Props = {
-  title: TooltipProps['title'];
-  placement?: TooltipProps['placement'];
-  text?: TextTruncateProps['text'];
+  text: TextTruncateProps['text'];
   line?: TextTruncateProps['line'];
   element?: TextTruncateProps['element'];
+  title?: TooltipProps['title'];
+  placement?: TooltipProps['placement'];
 };
 
 export const OverflowTooltip = (props: Props) => {
@@ -36,7 +36,7 @@ export const OverflowTooltip = (props: Props) => {
 
   return (
     <Tooltip
-      title={props.title}
+      title={props.title ?? (props.text as string)}
       placement={props.placement}
       disableHoverListener={!hover}
     >
diff --git a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
index 1660436c46..729f659b56 100644
--- a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
@@ -95,8 +95,8 @@ const columns: TableColumn<EntityRow>[] = [
     field: 'entity.metadata.description',
     render: ({ entity }) => (
       <OverflowTooltip
-        title={entity.metadata.description as string}
         text={entity.metadata.description}
+        placement="bottom-start"
       />
     ),
   },
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 43242faedb..91f187855a 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -94,8 +94,8 @@ const columns: TableColumn<EntityRow>[] = [
     field: 'entity.metadata.description',
     render: ({ entity }) => (
       <OverflowTooltip
-        title={entity.metadata.description as string}
         text={entity.metadata.description}
+        placement="bottom-start"
       />
     ),
   },