Creates storybook and tests for Tooltip component (#13184)

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"

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

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