fix: Hide Safari default tooltip (#1283)

* Hide Safari default tooltip

* Fix lint

* Add emotion dependency

* Fix package.json
This commit is contained in:
Geido
2021-08-10 13:14:55 +02:00
committed by Yongjie Zhao
parent 76828f7e32
commit 50a50324a7
2 changed files with 22 additions and 6 deletions

View File

@@ -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"

View File

@@ -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}
/>
</>
);
};