Creates storybook and tests for Tooltip component (#13184)

2021-02-18 03:51:35 -03:00 · 2021-02-18 03:51:35 -03:00 · fcd443d366
parent d48b894573
commit fcd443d366
24 changed files with 301 additions and 217 deletions
--- 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);
    });
  });

--- 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 = {
--- a/superset-frontend/src/common/components/Tooltip/Tooltip.stories.tsx
+++ 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' },
+};
--- a/superset-frontend/src/common/components/Tooltip/Tooltip.test.tsx
+++ 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();
+});
--- a/superset-frontend/src/common/components/Tooltip/index.tsx
+++ b/superset-frontend/src/common/components/Tooltip/index.tsx
--- 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>
    );
  }

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

--- 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) {
--- 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>
      );
    }

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

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

--- 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>
    );
  }
 }
--- a/superset-frontend/src/components/TooltipWrapper.jsx
+++ b/superset-frontend/src/components/TooltipWrapper.jsx
@ -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;
--- 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>
      );
    }

--- 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">
--- 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"
--- 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>
  );
 }

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

--- 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>
          );
--- 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'),
--- 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>
          );
--- 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',
--- 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>
          );