fix: Hide Safari default tooltip (#1283)

* Hide Safari default tooltip * Fix lint * Add emotion dependency * Fix package.json
apache · Nov 26, 2021 · 50a5032 · 50a5032
1 parent 76828f7
commit 50a5032
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/...ontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json b/...ontend/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/...ry_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx b/...ry_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
@@ -1,19 +1,34 @@
 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';
 
 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}
+      />
+    </>
   );
 };