fix(docz-theme-default): use tippy for tooltip

core/docz-theme-default/package.json

@@ -22,6 +22,7 @@
     "@emotion/cache": "^10.0.7",
     "@emotion/core": "^10.0.7",
     "@emotion/styled": "^10.0.7",
+    "@tippy.js/react": "^2.0.2",
     "codemirror": "^5.43.0",
     "copy-text-to-clipboard": "^1.0.4",
     "docz": "^0.13.5",
@@ -32,8 +33,7 @@
     "lodash.get": "^4.4.2",
     "match-sorter": "^2.3.0",
     "polished": "^2.3.3",
-    "prop-types": "15.6.2",
-    "rc-tooltip": "^3.7.3",
+    "prop-types": "15.7.1",
     "re-resizable": "^4.11.0",
     "react": "^16.8.1",
     "react-codemirror2": "^5.1.0",

core/docz-theme-default/src/components/ui/Tooltip.tsx

@@ -1,8 +1,7 @@
-import { SFC, ReactNode } from 'react'
-import { ThemeConfig } from 'docz'
-import { jsx, css, ClassNames } from '@emotion/core'
+import { jsx } from '@emotion/core'
+import { SFC, ReactNode, Fragment } from 'react'
 import styled from '@emotion/styled'
-import BaseTooltip from 'rc-tooltip'
+import Tippy from '@tippy.js/react'
 
 import { get } from '@utils/theme'
 
@@ -11,39 +10,15 @@ interface TooltipProps {
   children: ReactNode
 }
 
-const overlayStyle = (colors: Record<string, any>) => css`
-  .rc-tooltip-inner {
-    background: ${colors.tooltipBg};
-    color: ${colors.tooltipColor};
-  }
-
-  .rc-tooltip-arrow {
-    border-top-color: ${colors.tooltipBg};
-  }
-`
-
 const Link = styled('a')`
   text-decoration: none;
   color: ${get('colors.primary')};
 `
 
 export const Tooltip: SFC<TooltipProps> = ({ text, children }) => (
-  <ThemeConfig>
-    {config => (
-      <ClassNames>
-        {({ css }) => (
-          <BaseTooltip
-            placement="top"
-            trigger={['hover']}
-            overlay={text}
-            overlayClassName={css(overlayStyle(config.themeConfig.colors))}
-          >
-            <Link href="#" onClick={(ev: any) => ev.preventDefault()}>
-              {children}
-            </Link>
-          </BaseTooltip>
-        )}
-      </ClassNames>
-    )}
-  </ThemeConfig>
+  <Tippy content={<Fragment>{text}</Fragment>}>
+    <Link href="#" onClick={(ev: any) => ev.preventDefault()}>
+      {children}
+    </Link>
+  </Tippy>
 )