From fcd443d3669aeddc6958134fcb26f5a9895e21da Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Thu, 18 Feb 2021 03:51:35 -0300
Subject: [PATCH] Creates storybook and tests for Tooltip component (#13184)

---
 .../components/AlteredSliceTag_spec.jsx       |  6 +-
 .../explore/components/RowCountLabel_spec.jsx |  6 +-
 .../components/Tooltip/Tooltip.stories.tsx    | 77 +++++++++++++++++++
 .../components/Tooltip/Tooltip.test.tsx       | 72 +++++++++++++++++
 .../{Tooltip.tsx => Tooltip/index.tsx}        |  0
 .../src/components/AlteredSliceTag.jsx        |  6 +-
 .../src/components/CachedLabel.jsx            |  6 +-
 .../components/CertifiedIconWithTooltip.tsx   | 10 +--
 .../src/components/EditableTitle.tsx          | 10 +--
 superset-frontend/src/components/FaveStar.tsx | 10 +--
 .../FilterableTable/FilterableTable.tsx       | 11 ++-
 .../src/components/ListView/ActionsBar.tsx    | 15 ++--
 .../src/components/RefreshLabel.jsx           |  6 +-
 .../src/components/TooltipWrapper.jsx         | 59 --------------
 .../dashboard/components/PublishedStatus.jsx  | 26 +++----
 .../src/dashboard/components/SliceHeader.jsx  | 18 ++---
 .../explore/components/ExploreChartHeader.jsx | 11 ++-
 .../src/explore/components/RowCountLabel.jsx  |  6 +-
 .../controls/ColorSchemeControl.jsx           | 10 +--
 .../src/views/CRUD/chart/ChartList.tsx        | 26 +++----
 .../CRUD/csstemplates/CssTemplatesList.tsx    | 10 +--
 .../views/CRUD/dashboard/DashboardList.tsx    | 26 +++----
 .../views/CRUD/data/database/DatabaseList.tsx | 50 ++++++------
 .../views/CRUD/data/dataset/DatasetList.tsx   | 41 +++++-----
 24 files changed, 301 insertions(+), 217 deletions(-)
 create mode 100644 superset-frontend/src/common/components/Tooltip/Tooltip.stories.tsx
 create mode 100644 superset-frontend/src/common/components/Tooltip/Tooltip.test.tsx
 rename superset-frontend/src/common/components/{Tooltip.tsx => Tooltip/index.tsx} (100%)
 delete mode 100644 superset-frontend/src/components/TooltipWrapper.jsx

diff --git a/superset-frontend/spec/javascripts/components/AlteredSliceTag_spec.jsx b/superset-frontend/spec/javascripts/components/AlteredSliceTag_spec.jsx
index f939d7aef..cbde50b60 100644
--- a/superset-frontend/spec/javascripts/components/AlteredSliceTag_spec.jsx
+++ b/superset-frontend/spec/javascripts/components/AlteredSliceTag_spec.jsx
@@ -22,7 +22,7 @@ import { getChartControlPanelRegistry } from '@superset-ui/core';
 
 import AlteredSliceTag from 'src/components/AlteredSliceTag';
 import ModalTrigger from 'src/components/ModalTrigger';
-import TooltipWrapper from 'src/components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import TableCollection from 'src/components/dataViewCommon/TableCollection';
 import TableView from 'src/components/TableView';
 
@@ -97,11 +97,11 @@ describe('AlteredSliceTag', () => {
   });
 
   describe('renderTriggerNode', () => {
-    it('renders a TooltipWrapper', () => {
+    it('renders a Tooltip', () => {
       const triggerNode = mount(
         <div>{wrapper.instance().renderTriggerNode()}</div>,
       );
-      expect(triggerNode.find(TooltipWrapper)).toHaveLength(1);
+      expect(triggerNode.find(Tooltip)).toHaveLength(1);
     });
   });
 
diff --git a/superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx b/superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx
index 13de226e7..7a669c993 100644
--- a/superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx
@@ -20,7 +20,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import Label from 'src/components/Label';
-import TooltipWrapper from 'src/components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import RowCountLabel from 'src/explore/components/RowCountLabel';
 
 describe('RowCountLabel', () => {
@@ -34,10 +34,10 @@ describe('RowCountLabel', () => {
       true,
     );
   });
-  it('renders a Label and a TooltipWrapper', () => {
+  it('renders a Label and a Tooltip', () => {
     const wrapper = shallow(<RowCountLabel {...defaultProps} />);
     expect(wrapper.find(Label)).toExist();
-    expect(wrapper.find(TooltipWrapper)).toExist();
+    expect(wrapper.find(Tooltip)).toExist();
   });
   it('renders a danger when limit is reached', () => {
     const props = {
diff --git a/superset-frontend/src/common/components/Tooltip/Tooltip.stories.tsx b/superset-frontend/src/common/components/Tooltip/Tooltip.stories.tsx
new file mode 100644
index 000000000..f1040d71d
--- /dev/null
+++ b/superset-frontend/src/common/components/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,77 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import Button from 'src/components/Button';
+import { TooltipProps, TooltipPlacement } from 'antd/lib/tooltip';
+import { Tooltip } from './index';
+
+export default {
+  title: 'Tooltip',
+  component: Tooltip,
+};
+
+const PLACEMENTS: TooltipPlacement[] = [
+  'bottom',
+  'bottomLeft',
+  'bottomRight',
+  'left',
+  'leftBottom',
+  'leftTop',
+  'right',
+  'rightBottom',
+  'rightTop',
+  'top',
+  'topLeft',
+  'topRight',
+];
+
+const TRIGGERS = ['hover', 'focus', 'click', 'contextMenu'];
+
+export const InteractiveTooltip = (args: TooltipProps) => (
+  <Tooltip {...args}>
+    <Button style={{ margin: '50px 100px' }}>Hover me</Button>
+  </Tooltip>
+);
+
+InteractiveTooltip.story = {
+  parameters: {
+    knobs: {
+      disabled: true,
+    },
+  },
+};
+
+InteractiveTooltip.args = {
+  title: 'Simple tooltip text',
+  mouseEnterDelay: 0.1,
+  mouseLeaveDelay: 0.1,
+};
+
+InteractiveTooltip.argTypes = {
+  placement: {
+    defaultValue: 'top',
+    control: { type: 'select', options: PLACEMENTS },
+  },
+  trigger: {
+    defaultValue: 'hover',
+    control: { type: 'select', options: TRIGGERS },
+  },
+  color: { control: { type: 'color' } },
+  onVisibleChange: { action: 'onVisibleChange' },
+};
diff --git a/superset-frontend/src/common/components/Tooltip/Tooltip.test.tsx b/superset-frontend/src/common/components/Tooltip/Tooltip.test.tsx
new file mode 100644
index 000000000..1aec5a23b
--- /dev/null
+++ b/superset-frontend/src/common/components/Tooltip/Tooltip.test.tsx
@@ -0,0 +1,72 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { supersetTheme } from '@superset-ui/core';
+import Button from 'src/components/Button';
+import Icon from 'src/components/Icon';
+import { Tooltip } from '.';
+
+test('starts hidden with default props', () => {
+  render(
+    <Tooltip title="Simple tooltip">
+      <Button>Hover me</Button>
+    </Tooltip>,
+  );
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});
+
+test('renders on hover', async () => {
+  render(
+    <Tooltip title="Simple tooltip">
+      <Button>Hover me</Button>
+    </Tooltip>,
+  );
+  userEvent.hover(screen.getByRole('button'));
+  expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+});
+
+test('renders with theme', () => {
+  render(
+    <Tooltip title="Simple tooltip" defaultVisible>
+      <Button>Hover me</Button>
+    </Tooltip>,
+  );
+  const tooltip = screen.getByRole('tooltip');
+  expect(tooltip).toHaveStyle({
+    background: `${supersetTheme.colors.grayscale.dark2}e6`,
+  });
+  expect(tooltip.parentNode?.parentNode).toHaveStyle({
+    lineHeight: 1.6,
+    fontSize: 12,
+  });
+});
+
+test('renders with icon child', async () => {
+  render(
+    <Tooltip title="Simple tooltip">
+      <Icon name="alert" role="img">
+        Hover me
+      </Icon>
+    </Tooltip>,
+  );
+  userEvent.hover(screen.getByRole('img'));
+  expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+});
diff --git a/superset-frontend/src/common/components/Tooltip.tsx b/superset-frontend/src/common/components/Tooltip/index.tsx
similarity index 100%
rename from superset-frontend/src/common/components/Tooltip.tsx
rename to superset-frontend/src/common/components/Tooltip/index.tsx
diff --git a/superset-frontend/src/components/AlteredSliceTag.jsx b/superset-frontend/src/components/AlteredSliceTag.jsx
index 53a5b8ca2..407eb4ecd 100644
--- a/superset-frontend/src/components/AlteredSliceTag.jsx
+++ b/superset-frontend/src/components/AlteredSliceTag.jsx
@@ -22,7 +22,7 @@ import { isEqual, isEmpty } from 'lodash';
 import { t } from '@superset-ui/core';
 import getControlsForVizType from 'src/utils/getControlsForVizType';
 import { safeStringify } from 'src/utils/safeStringify';
-import TooltipWrapper from './TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import ModalTrigger from './ModalTrigger';
 import TableView from './TableView';
 
@@ -174,14 +174,14 @@ export default class AlteredSliceTag extends React.Component {
 
   renderTriggerNode() {
     return (
-      <TooltipWrapper label="difference" tooltip={t('Click to see difference')}>
+      <Tooltip id="difference-tooltip" title={t('Click to see difference')}>
         <span
           className="label label-warning m-l-5"
           style={{ fontSize: '12px' }}
         >
           {t('Altered')}
         </span>
-      </TooltipWrapper>
+      </Tooltip>
     );
   }
 
diff --git a/superset-frontend/src/components/CachedLabel.jsx b/superset-frontend/src/components/CachedLabel.jsx
index a7bc72089..a1f5a0c8a 100644
--- a/superset-frontend/src/components/CachedLabel.jsx
+++ b/superset-frontend/src/components/CachedLabel.jsx
@@ -22,7 +22,7 @@ import moment from 'moment';
 import { t } from '@superset-ui/core';
 
 import Label from 'src/components/Label';
-import TooltipWrapper from './TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 
 const propTypes = {
   onClick: PropTypes.func,
@@ -69,7 +69,7 @@ class CacheLabel extends React.PureComponent {
   render() {
     const labelType = this.state.hovered ? 'primary' : 'default';
     return (
-      <TooltipWrapper tooltip={this.state.tooltipContent} label="cache-desc">
+      <Tooltip title={this.state.tooltipContent} id="cache-desc-tooltip">
         <Label
           className={`${this.props.className}`}
           type={labelType}
@@ -79,7 +79,7 @@ class CacheLabel extends React.PureComponent {
         >
           {t('cached')} <i className="fa fa-refresh" />
         </Label>
-      </TooltipWrapper>
+      </Tooltip>
     );
   }
 }
diff --git a/superset-frontend/src/components/CertifiedIconWithTooltip.tsx b/superset-frontend/src/components/CertifiedIconWithTooltip.tsx
index e4132dc82..dc4d5ed72 100644
--- a/superset-frontend/src/components/CertifiedIconWithTooltip.tsx
+++ b/superset-frontend/src/components/CertifiedIconWithTooltip.tsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import { t, supersetTheme } from '@superset-ui/core';
 import Icon from 'src/components/Icon';
-import TooltipWrapper from 'src/components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 
 interface CertifiedIconWithTooltipProps {
   certifiedBy?: string;
@@ -33,9 +33,9 @@ function CertifiedIconWithTooltip({
   size = 24,
 }: CertifiedIconWithTooltipProps) {
   return (
-    <TooltipWrapper
-      label="certified-details"
-      tooltip={
+    <Tooltip
+      id="certified-details-tooltip"
+      title={
         <>
           {certifiedBy && <div>{t('Certified by %s', certifiedBy)}</div>}
           <div>{details}</div>
@@ -48,7 +48,7 @@ function CertifiedIconWithTooltip({
         width={size}
         name="certified"
       />
-    </TooltipWrapper>
+    </Tooltip>
   );
 }
 
diff --git a/superset-frontend/src/components/EditableTitle.tsx b/superset-frontend/src/components/EditableTitle.tsx
index 5f4f7a482..024879358 100644
--- a/superset-frontend/src/components/EditableTitle.tsx
+++ b/superset-frontend/src/components/EditableTitle.tsx
@@ -19,7 +19,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import cx from 'classnames';
 import { t } from '@superset-ui/core';
-import TooltipWrapper from './TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 
 interface EditableTitleProps {
   canEdit?: boolean;
@@ -174,9 +174,9 @@ export default function EditableTitle({
     );
   if (showTooltip && !isEditing) {
     titleComponent = (
-      <TooltipWrapper
-        label="title"
-        tooltip={
+      <Tooltip
+        id="title-tooltip"
+        title={
           canEdit
             ? t('Click to edit')
             : noPermitTooltip ||
@@ -184,7 +184,7 @@ export default function EditableTitle({
         }
       >
         {titleComponent}
-      </TooltipWrapper>
+      </Tooltip>
     );
   }
   if (!canEdit) {
diff --git a/superset-frontend/src/components/FaveStar.tsx b/superset-frontend/src/components/FaveStar.tsx
index 32f4a5d05..28c970881 100644
--- a/superset-frontend/src/components/FaveStar.tsx
+++ b/superset-frontend/src/components/FaveStar.tsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { t, styled } from '@superset-ui/core';
-import TooltipWrapper from './TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import Icon from './Icon';
 
 interface FaveStarProps {
@@ -65,12 +65,12 @@ export default class FaveStar extends React.PureComponent<FaveStarProps> {
 
     if (this.props.showTooltip) {
       return (
-        <TooltipWrapper
-          label="fave-unfave"
-          tooltip={t('Click to favorite/unfavorite')}
+        <Tooltip
+          id="fave-unfave-tooltip"
+          title={t('Click to favorite/unfavorite')}
         >
           {content}
-        </TooltipWrapper>
+        </Tooltip>
       );
     }
 
diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
index c7629962d..0a86c5e0e 100644
--- a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
+++ b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
@@ -30,11 +30,10 @@ import {
   Table,
 } from 'react-virtualized';
 import { getMultipleTextDimensions, t, styled } from '@superset-ui/core';
-
+import { Tooltip } from 'src/common/components/Tooltip';
 import Button from '../Button';
 import CopyToClipboard from '../CopyToClipboard';
 import ModalTrigger from '../ModalTrigger';
-import TooltipWrapper from '../TooltipWrapper';
 
 function safeJsonObjectParse(
   data: unknown,
@@ -358,14 +357,14 @@ export default class FilterableTable extends PureComponent<
         ? 'header-style-disabled'
         : 'header-style';
     return (
-      <TooltipWrapper label="header" tooltip={label}>
+      <Tooltip id="header-tooltip" title={label}>
         <div className={className}>
           {label}
           {sortBy === dataKey && (
             <SortIndicator sortDirection={sortDirection} />
           )}
         </div>
-      </TooltipWrapper>
+      </Tooltip>
     );
   }
 
@@ -384,7 +383,7 @@ export default class FilterableTable extends PureComponent<
         ? 'header-style-disabled'
         : 'header-style';
     return (
-      <TooltipWrapper key={key} label="header" tooltip={label}>
+      <Tooltip key={key} id="header-tooltip" title={label}>
         <div
           style={{
             ...style,
@@ -397,7 +396,7 @@ export default class FilterableTable extends PureComponent<
         >
           {label}
         </div>
-      </TooltipWrapper>
+      </Tooltip>
     );
   }
 
diff --git a/superset-frontend/src/components/ListView/ActionsBar.tsx b/superset-frontend/src/components/ListView/ActionsBar.tsx
index c1734f6d8..b9785294e 100644
--- a/superset-frontend/src/components/ListView/ActionsBar.tsx
+++ b/superset-frontend/src/components/ListView/ActionsBar.tsx
@@ -18,13 +18,14 @@
  */
 import React from 'react';
 import { styled } from '@superset-ui/core';
-import TooltipWrapper from 'src/components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import Icon, { IconName } from 'src/components/Icon';
+import { TooltipPlacement } from 'antd/lib/tooltip';
 
 export type ActionProps = {
   label: string;
   tooltip?: string | React.ReactElement;
-  placement?: string;
+  placement?: TooltipPlacement;
   icon: IconName;
   onClick: () => void;
 };
@@ -55,10 +56,10 @@ export default function ActionsBar({ actions }: ActionsBarProps) {
       {actions.map((action, index) => {
         if (action.tooltip) {
           return (
-            <TooltipWrapper
-              label={action.label}
-              tooltip={action.tooltip}
-              placement={action.placement || ''}
+            <Tooltip
+              id={`${action.label}-tooltip`}
+              title={action.tooltip}
+              placement={action.placement}
               key={index}
             >
               <span
@@ -70,7 +71,7 @@ export default function ActionsBar({ actions }: ActionsBarProps) {
               >
                 <Icon name={action.icon} />
               </span>
-            </TooltipWrapper>
+            </Tooltip>
           );
         }
 
diff --git a/superset-frontend/src/components/RefreshLabel.jsx b/superset-frontend/src/components/RefreshLabel.jsx
index 2155f0bfa..bac7ae18c 100644
--- a/superset-frontend/src/components/RefreshLabel.jsx
+++ b/superset-frontend/src/components/RefreshLabel.jsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import TooltipWrapper from './TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 
 import './RefreshLabel.less';
 
@@ -30,7 +30,7 @@ const propTypes = {
 class RefreshLabel extends React.PureComponent {
   render() {
     return (
-      <TooltipWrapper tooltip={this.props.tooltipContent} label="cache-desc">
+      <Tooltip title={this.props.tooltipContent} id="cache-desc-tooltip">
         <i
           aria-label="Icon"
           role="button"
@@ -38,7 +38,7 @@ class RefreshLabel extends React.PureComponent {
           className="RefreshLabel fa fa-refresh pointer"
           onClick={this.props.onClick}
         />
-      </TooltipWrapper>
+      </Tooltip>
     );
   }
 }
diff --git a/superset-frontend/src/components/TooltipWrapper.jsx b/superset-frontend/src/components/TooltipWrapper.jsx
deleted file mode 100644
index d21f87bcc..000000000
--- a/superset-frontend/src/components/TooltipWrapper.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { kebabCase } from 'lodash';
-import { Tooltip } from 'src/common/components/Tooltip';
-
-const propTypes = {
-  label: PropTypes.string.isRequired,
-  tooltip: PropTypes.node.isRequired,
-  children: PropTypes.node.isRequired,
-  placement: PropTypes.string,
-  trigger: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
-};
-
-const defaultProps = {
-  placement: 'top',
-};
-
-export default function TooltipWrapper({
-  label,
-  tooltip,
-  children,
-  placement,
-  trigger,
-}) {
-  return (
-    <Tooltip
-      id={`${kebabCase(label)}-tooltip`}
-      placement={placement}
-      title={tooltip}
-      trigger={trigger}
-    >
-      {children}
-    </Tooltip>
-  );
-}
-
-TooltipWrapper.propTypes = propTypes;
-TooltipWrapper.defaultProps = defaultProps;
diff --git a/superset-frontend/src/dashboard/components/PublishedStatus.jsx b/superset-frontend/src/dashboard/components/PublishedStatus.jsx
index cbf642cc0..403ab03eb 100644
--- a/superset-frontend/src/dashboard/components/PublishedStatus.jsx
+++ b/superset-frontend/src/dashboard/components/PublishedStatus.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from '@superset-ui/core';
-import TooltipWrapper from 'src/components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import Label from 'src/components/Label';
 
 const propTypes = {
@@ -59,10 +59,10 @@ export default class PublishedStatus extends React.Component {
       // if they can edit the dash, make the badge a button
       if (this.props.canEdit && this.props.canSave) {
         return (
-          <TooltipWrapper
-            label="Unpublished Dashboard"
+          <Tooltip
+            id="unpublished-dashboard-tooltip"
             placement="bottom"
-            tooltip={draftButtonTooltip}
+            title={draftButtonTooltip}
           >
             <Label
               onClick={() => {
@@ -71,27 +71,27 @@ export default class PublishedStatus extends React.Component {
             >
               {t('Draft')}
             </Label>
-          </TooltipWrapper>
+          </Tooltip>
         );
       }
       return (
-        <TooltipWrapper
-          label="Unpublished Dashboard"
+        <Tooltip
+          id="unpublished-dashboard-tooltip"
           placement="bottom"
-          tooltip={draftDivTooltip}
+          title={draftDivTooltip}
         >
           <Label>{t('Draft')}</Label>
-        </TooltipWrapper>
+        </Tooltip>
       );
     }
 
     // Show the published badge for the owner of the dashboard to toggle
     if (this.props.canEdit && this.props.canSave) {
       return (
-        <TooltipWrapper
-          label="Published Dashboard"
+        <Tooltip
+          id="published-dashboard-tooltip"
           placement="bottom"
-          tooltip={publishedTooltip}
+          title={publishedTooltip}
         >
           <Label
             onClick={() => {
@@ -100,7 +100,7 @@ export default class PublishedStatus extends React.Component {
           >
             {t('Published')}
           </Label>
-        </TooltipWrapper>
+        </Tooltip>
       );
     }
 
diff --git a/superset-frontend/src/dashboard/components/SliceHeader.jsx b/superset-frontend/src/dashboard/components/SliceHeader.jsx
index fcc1dd5ab..5f9ecd397 100644
--- a/superset-frontend/src/dashboard/components/SliceHeader.jsx
+++ b/superset-frontend/src/dashboard/components/SliceHeader.jsx
@@ -20,8 +20,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { t } from '@superset-ui/core';
+import { Tooltip } from 'src/common/components/Tooltip';
 import EditableTitle from '../../components/EditableTitle';
-import TooltipWrapper from '../../components/TooltipWrapper';
 import SliceHeaderControls from './SliceHeaderControls';
 import FiltersBadge from '../containers/FiltersBadge';
 
@@ -122,22 +122,22 @@ class SliceHeader extends React.PureComponent {
             showTooltip={false}
           />
           {!!Object.values(annotationQuery).length && (
-            <TooltipWrapper
-              label="annotations-loading"
+            <Tooltip
+              id="annotations-loading-tooltip"
               placement="top"
-              tooltip={annoationsLoading}
+              title={annoationsLoading}
             >
               <i className="fa fa-refresh warning" />
-            </TooltipWrapper>
+            </Tooltip>
           )}
           {!!Object.values(annotationError).length && (
-            <TooltipWrapper
-              label="annoation-errors"
+            <Tooltip
+              id="annoation-errors-tooltip"
               placement="top"
-              tooltip={annoationsError}
+              title={annoationsError}
             >
               <i className="fa fa-exclamation-circle danger" />
-            </TooltipWrapper>
+            </Tooltip>
           )}
         </div>
         <div className="header-controls">
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader.jsx b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
index 9c1df9f3a..adf07c797 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
@@ -21,14 +21,13 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import { styled, t } from '@superset-ui/core';
-
+import { Tooltip } from 'src/common/components/Tooltip';
 import { chartPropShape } from '../../dashboard/util/propShapes';
 import ExploreActionButtons from './ExploreActionButtons';
 import RowCountLabel from './RowCountLabel';
 import EditableTitle from '../../components/EditableTitle';
 import AlteredSliceTag from '../../components/AlteredSliceTag';
 import FaveStar from '../../components/FaveStar';
-import TooltipWrapper from '../../components/TooltipWrapper';
 import Timer from '../../components/Timer';
 import CachedLabel from '../../components/CachedLabel';
 import PropertiesModal from './PropertiesModal';
@@ -161,9 +160,9 @@ export class ExploreChartHeader extends React.PureComponent {
                 onSave={this.props.sliceUpdated}
                 slice={this.props.slice}
               />
-              <TooltipWrapper
-                label="edit-desc"
-                tooltip={t('Edit chart properties')}
+              <Tooltip
+                id="edit-desc-tooltip"
+                title={t('Edit chart properties')}
               >
                 <span
                   role="button"
@@ -173,7 +172,7 @@ export class ExploreChartHeader extends React.PureComponent {
                 >
                   <i className="fa fa-edit" />
                 </span>
-              </TooltipWrapper>
+              </Tooltip>
               {this.props.chart.sliceFormData && (
                 <AlteredSliceTag
                   className="altered"
diff --git a/superset-frontend/src/explore/components/RowCountLabel.jsx b/superset-frontend/src/explore/components/RowCountLabel.jsx
index 6bd38ba96..9ba9aaca5 100644
--- a/superset-frontend/src/explore/components/RowCountLabel.jsx
+++ b/superset-frontend/src/explore/components/RowCountLabel.jsx
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import { getNumberFormatter, t } from '@superset-ui/core';
 
 import Label from 'src/components/Label';
-import TooltipWrapper from '../../components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 
 const propTypes = {
   rowcount: PropTypes.number,
@@ -47,11 +47,11 @@ export default function RowCountLabel({ rowcount, limit, suffix, loading }) {
     </span>
   );
   return (
-    <TooltipWrapper label="tt-rowcount" tooltip={tooltip}>
+    <Tooltip id="tt-rowcount-tooltip" title={tooltip}>
       <Label type={type} data-test="row-count-label">
         {loading ? 'Loading...' : `${formattedRowCount} ${suffix}`}
       </Label>
-    </TooltipWrapper>
+    </Tooltip>
   );
 }
 
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx
index 03d1445b4..6b76fbc3d 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx
@@ -20,8 +20,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isFunction } from 'lodash';
 import { Select } from 'src/components/Select';
+import { Tooltip } from 'src/common/components/Tooltip';
 import ControlHeader from '../ControlHeader';
-import TooltipWrapper from '../../../components/TooltipWrapper';
+
 import './ColorSchemeControl.less';
 
 const propTypes = {
@@ -72,10 +73,7 @@ export default class ColorSchemeControl extends React.PureComponent {
     }
 
     return (
-      <TooltipWrapper
-        label={`${currentScheme.id}-tooltip`}
-        tooltip={currentScheme.label}
-      >
+      <Tooltip id={`${currentScheme.id}-tooltip`} title={currentScheme.label}>
         <ul className="color-scheme-container" data-test={currentScheme.id}>
           {colors.map((color, i) => (
             <li
@@ -89,7 +87,7 @@ export default class ColorSchemeControl extends React.PureComponent {
             </li>
           ))}
         </ul>
-      </TooltipWrapper>
+      </Tooltip>
     );
   }
 
diff --git a/superset-frontend/src/views/CRUD/chart/ChartList.tsx b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
index 6048cc9e4..67b4d2100 100644
--- a/superset-frontend/src/views/CRUD/chart/ChartList.tsx
+++ b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
@@ -46,7 +46,7 @@ import withToasts from 'src/messageToasts/enhancers/withToasts';
 import PropertiesModal from 'src/explore/components/PropertiesModal';
 import ImportModelsModal from 'src/components/ImportModal/index';
 import Chart from 'src/types/Chart';
-import TooltipWrapper from 'src/components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import ChartCard from './ChartCard';
 
 const PAGE_SIZE = 25;
@@ -308,9 +308,9 @@ function ChartList(props: ChartListProps) {
                   onConfirm={handleDelete}
                 >
                   {confirmDelete => (
-                    <TooltipWrapper
-                      label="delete-action"
-                      tooltip={t('Delete')}
+                    <Tooltip
+                      id="delete-action-tooltip"
+                      title={t('Delete')}
                       placement="bottom"
                     >
                       <span
@@ -321,14 +321,14 @@ function ChartList(props: ChartListProps) {
                       >
                         <Icon name="trash" />
                       </span>
-                    </TooltipWrapper>
+                    </Tooltip>
                   )}
                 </ConfirmStatusChange>
               )}
               {canExport && (
-                <TooltipWrapper
-                  label="export-action"
-                  tooltip={t('Export')}
+                <Tooltip
+                  id="export-action-tooltip"
+                  title={t('Export')}
                   placement="bottom"
                 >
                   <span
@@ -339,12 +339,12 @@ function ChartList(props: ChartListProps) {
                   >
                     <Icon name="share" />
                   </span>
-                </TooltipWrapper>
+                </Tooltip>
               )}
               {canEdit && (
-                <TooltipWrapper
-                  label="edit-action"
-                  tooltip={t('Edit')}
+                <Tooltip
+                  id="edit-action-tooltip"
+                  title={t('Edit')}
                   placement="bottom"
                 >
                   <span
@@ -355,7 +355,7 @@ function ChartList(props: ChartListProps) {
                   >
                     <Icon name="edit-alt" />
                   </span>
-                </TooltipWrapper>
+                </Tooltip>
               )}
             </span>
           );
diff --git a/superset-frontend/src/views/CRUD/csstemplates/CssTemplatesList.tsx b/superset-frontend/src/views/CRUD/csstemplates/CssTemplatesList.tsx
index cc87c6b4a..5e33bfad0 100644
--- a/superset-frontend/src/views/CRUD/csstemplates/CssTemplatesList.tsx
+++ b/superset-frontend/src/views/CRUD/csstemplates/CssTemplatesList.tsx
@@ -27,7 +27,7 @@ import { createFetchRelated, createErrorHandler } from 'src/views/CRUD/utils';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import SubMenu, { SubMenuProps } from 'src/components/Menu/SubMenu';
 import DeleteModal from 'src/components/DeleteModal';
-import TooltipWrapper from 'src/components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
 import { IconName } from 'src/components/Icon';
 import ActionsBar, { ActionProps } from 'src/components/ListView/ActionsBar';
@@ -146,13 +146,13 @@ function CssTemplatesList({
           }
 
           return (
-            <TooltipWrapper
-              label="allow-run-async-header"
-              tooltip={t('Last modified by %s', name)}
+            <Tooltip
+              id="allow-run-async-header-tooltip"
+              title={t('Last modified by %s', name)}
               placement="right"
             >
               <span>{changedOn}</span>
-            </TooltipWrapper>
+            </Tooltip>
           );
         },
         Header: t('Last modified'),
diff --git a/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx b/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx
index 8138dafea..af810c132 100644
--- a/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx
+++ b/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx
@@ -40,7 +40,7 @@ import FacePile from 'src/components/FacePile';
 import Icon from 'src/components/Icon';
 import FaveStar from 'src/components/FaveStar';
 import PropertiesModal from 'src/dashboard/components/PropertiesModal';
-import TooltipWrapper from 'src/components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import ImportModelsModal from 'src/components/ImportModal/index';
 
 import Dashboard from 'src/dashboard/containers/Dashboard';
@@ -291,9 +291,9 @@ function DashboardList(props: DashboardListProps) {
                   onConfirm={handleDelete}
                 >
                   {confirmDelete => (
-                    <TooltipWrapper
-                      label="delete-action"
-                      tooltip={t('Delete')}
+                    <Tooltip
+                      id="delete-action-tooltip"
+                      title={t('Delete')}
                       placement="bottom"
                     >
                       <span
@@ -307,14 +307,14 @@ function DashboardList(props: DashboardListProps) {
                           name="trash"
                         />
                       </span>
-                    </TooltipWrapper>
+                    </Tooltip>
                   )}
                 </ConfirmStatusChange>
               )}
               {canExport && (
-                <TooltipWrapper
-                  label="export-action"
-                  tooltip={t('Export')}
+                <Tooltip
+                  id="export-action-tooltip"
+                  title={t('Export')}
                   placement="bottom"
                 >
                   <span
@@ -325,12 +325,12 @@ function DashboardList(props: DashboardListProps) {
                   >
                     <Icon name="share" />
                   </span>
-                </TooltipWrapper>
+                </Tooltip>
               )}
               {canEdit && (
-                <TooltipWrapper
-                  label="edit-action"
-                  tooltip={t('Edit')}
+                <Tooltip
+                  id="edit-action-tooltip"
+                  title={t('Edit')}
                   placement="bottom"
                 >
                   <span
@@ -341,7 +341,7 @@ function DashboardList(props: DashboardListProps) {
                   >
                     <Icon name="edit-alt" />
                   </span>
-                </TooltipWrapper>
+                </Tooltip>
               )}
             </span>
           );
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
index 78d7e466d..82d897039 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx
@@ -25,7 +25,7 @@ import { createErrorHandler } from 'src/views/CRUD/utils';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import SubMenu, { SubMenuProps } from 'src/components/Menu/SubMenu';
 import DeleteModal from 'src/components/DeleteModal';
-import TooltipWrapper from 'src/components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import Icon from 'src/components/Icon';
 import ListView, { Filters } from 'src/components/ListView';
 import { commonMenuData } from 'src/views/CRUD/data/common';
@@ -205,13 +205,13 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
       {
         accessor: 'allow_run_async',
         Header: (
-          <TooltipWrapper
-            label="allow-run-async-header"
-            tooltip={t('Asynchronous query execution')}
+          <Tooltip
+            id="allow-run-async-header-tooltip"
+            title={t('Asynchronous query execution')}
             placement="top"
           >
             <span>{t('AQE')}</span>
-          </TooltipWrapper>
+          </Tooltip>
         ),
         Cell: ({
           row: {
@@ -223,13 +223,13 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
       {
         accessor: 'allow_dml',
         Header: (
-          <TooltipWrapper
-            label="allow-dml-header"
-            tooltip={t('Allow data manipulation language')}
+          <Tooltip
+            id="allow-dml-header-tooltip"
+            title={t('Allow data manipulation language')}
             placement="top"
           >
             <span>{t('DML')}</span>
-          </TooltipWrapper>
+          </Tooltip>
         ),
         Cell: ({
           row: {
@@ -298,19 +298,19 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
                   data-test="database-delete"
                   onClick={handleDelete}
                 >
-                  <TooltipWrapper
-                    label="delete-action"
-                    tooltip={t('Delete database')}
+                  <Tooltip
+                    id="delete-action-tooltip"
+                    title={t('Delete database')}
                     placement="bottom"
                   >
                     <Icon name="trash" />
-                  </TooltipWrapper>
+                  </Tooltip>
                 </span>
               )}
               {canExport && (
-                <TooltipWrapper
-                  label="export-action"
-                  tooltip={t('Export')}
+                <Tooltip
+                  id="export-action-tooltip"
+                  title={t('Export')}
                   placement="bottom"
                 >
                   <span
@@ -321,12 +321,12 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
                   >
                     <Icon name="share" />
                   </span>
-                </TooltipWrapper>
+                </Tooltip>
               )}
               {canEdit && (
-                <TooltipWrapper
-                  label="edit-action"
-                  tooltip={t('Edit')}
+                <Tooltip
+                  id="edit-action-tooltip"
+                  title={t('Edit')}
                   placement="bottom"
                 >
                   <span
@@ -338,7 +338,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
                   >
                     <Icon name="edit-alt" />
                   </span>
-                </TooltipWrapper>
+                </Tooltip>
               )}
             </span>
           );
@@ -367,13 +367,13 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
       },
       {
         Header: (
-          <TooltipWrapper
-            label="allow-run-async-filter-header"
-            tooltip={t('Asynchronous query execution')}
+          <Tooltip
+            id="allow-run-async-filter-header-tooltip"
+            title={t('Asynchronous query execution')}
             placement="top"
           >
             <span>{t('AQE')}</span>
-          </TooltipWrapper>
+          </Tooltip>
         ),
         id: 'allow_run_async',
         input: 'select',
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
index f5d5a7884..85406ae80 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
@@ -41,7 +41,7 @@ import SubMenu, {
 import { commonMenuData } from 'src/views/CRUD/data/common';
 import Owner from 'src/types/Owner';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
-import TooltipWrapper from 'src/components/TooltipWrapper';
+import { Tooltip } from 'src/common/components/Tooltip';
 import Icon from 'src/components/Icon';
 import FacePile from 'src/components/FacePile';
 import CertifiedIconWithTooltip from 'src/components/CertifiedIconWithTooltip';
@@ -199,22 +199,19 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         }: any) => {
           if (kind === 'physical') {
             return (
-              <TooltipWrapper
-                label="physical-dataset"
-                tooltip={t('Physical dataset')}
+              <Tooltip
+                id="physical-dataset-tooltip"
+                title={t('Physical dataset')}
               >
                 <Icon name="dataset-physical" />
-              </TooltipWrapper>
+              </Tooltip>
             );
           }
 
           return (
-            <TooltipWrapper
-              label="virtual-dataset"
-              tooltip={t('Virtual dataset')}
-            >
+            <Tooltip id="virtual-dataset-tooltip" title={t('Virtual dataset')}>
               <Icon name="dataset-virtual" />
-            </TooltipWrapper>
+            </Tooltip>
           );
         },
         accessor: 'kind_icon',
@@ -325,9 +322,9 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
           return (
             <span className="actions">
               {canDelete && (
-                <TooltipWrapper
-                  label="delete-action"
-                  tooltip={t('Delete')}
+                <Tooltip
+                  id="delete-action-tooltip"
+                  title={t('Delete')}
                   placement="bottom"
                 >
                   <span
@@ -338,12 +335,12 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
                   >
                     <Icon name="trash" />
                   </span>
-                </TooltipWrapper>
+                </Tooltip>
               )}
               {canExport && (
-                <TooltipWrapper
-                  label="export-action"
-                  tooltip={t('Export')}
+                <Tooltip
+                  id="export-action-tooltip"
+                  title={t('Export')}
                   placement="bottom"
                 >
                   <span
@@ -354,12 +351,12 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
                   >
                     <Icon name="share" />
                   </span>
-                </TooltipWrapper>
+                </Tooltip>
               )}
               {canEdit && (
-                <TooltipWrapper
-                  label="edit-action"
-                  tooltip={t('Edit')}
+                <Tooltip
+                  id="edit-action-tooltip"
+                  title={t('Edit')}
                   placement="bottom"
                 >
                   <span
@@ -370,7 +367,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
                   >
                     <Icon name="edit-alt" />
                   </span>
-                </TooltipWrapper>
+                </Tooltip>
               )}
             </span>
           );