From 50a50324a705a275c19ca8446d28e5fba98c98bc Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Tue, 10 Aug 2021 13:14:55 +0200
Subject: [PATCH] fix: Hide Safari default tooltip (#1283)

* Hide Safari default tooltip

* Fix lint

* Add emotion dependency

* Fix package.json
---
 .../superset-ui-chart-controls/package.json   |  1 +
 .../src/components/Tooltip.tsx                | 27 ++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json
index 1f4796deffbb..69fb5b1488fc 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json
@@ -32,6 +32,7 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.1.5",
     "@types/react": "*",
     "antd": "^4.9.4",
     "react": "^16.13.1"
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
index e8235d4aa713..50a18498afb5 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { useTheme } from '@superset-ui/core';
+import { useTheme, css } from '@superset-ui/core';
 import { Tooltip as BaseTooltip } from 'antd';
 import { TooltipProps } from 'antd/lib/tooltip';
+import { Global } from '@emotion/react';
 
 export { TooltipProps } from 'antd/lib/tooltip';
 
@@ -9,11 +10,25 @@ export const Tooltip = ({ overlayStyle, color, ...props }: TooltipProps) => {
   const theme = useTheme();
   const defaultColor = `${theme.colors.grayscale.dark2}e6`;
   return (
-    <BaseTooltip
-      overlayStyle={{ fontSize: theme.typography.sizes.s, lineHeight: '1.6', ...overlayStyle }}
-      color={defaultColor || color}
-      {...props}
-    />
+    <>
+      {/* Safari hack to hide browser default tooltips */}
+      <Global
+        styles={css`
+          .ant-tooltip-open {
+            display: inline-block;
+            &::after {
+              content: '';
+              display: block;
+            }
+          }
+        `}
+      />
+      <BaseTooltip
+        overlayStyle={{ fontSize: theme.typography.sizes.s, lineHeight: '1.6', ...overlayStyle }}
+        color={defaultColor || color}
+        {...props}
+      />
+    </>
   );
 };