fix(xo-web/tooltip): use pointer events instead of mouse events (#5084)

packages/xo-web/src/common/tooltip/index.js

@@ -57,12 +57,6 @@ export class TooltipViewer extends Component {
 
 // ===================================================================
 
-// Wrap disabled HTML element before wrapping it with Tooltip
-// <Tooltip>
-//   <div>
-//     <MyComponent disabled />
-//   </div>
-// </Tooltip>
 export default class Tooltip extends Component {
   static propTypes = {
     children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
@@ -95,9 +89,15 @@ export default class Tooltip extends Component {
   _addListeners() {
     const node = (this._node = ReactDOM.findDOMNode(this))
 
-    node.addEventListener('mouseenter', this._showTooltip)
+    // 2020-06-15: Use pointer events instead of mouse events to workaround
-    node.addEventListener('mouseleave', this._hideTooltip)
+    // Chrome not firing any mouse event on disabled inputs. Pointer events
-    node.addEventListener('mousemove', this._updateTooltip)
+    // should be correctly fired on most browsers and are similar to mouse
+    // events on mouse-controlled devices.
+    // https://github.com/reach/reach-ui/issues/564#issuecomment-620502842
+    // https://caniuse.com/#feat=mdn-api_pointerevent
+    node.addEventListener('pointerenter', this._showTooltip)
+    node.addEventListener('pointerleave', this._hideTooltip)
+    node.addEventListener('pointermove', this._updateTooltip)
   }
 
   _removeListeners() {
@@ -108,9 +108,9 @@ export default class Tooltip extends Component {
       return
     }
 
-    node.removeEventListener('mouseenter', this._showTooltip)
+    node.removeEventListener('pointerenter', this._showTooltip)
-    node.removeEventListener('mouseleave', this._hideTooltip)
+    node.removeEventListener('pointerleave', this._hideTooltip)
-    node.removeEventListener('mousemove', this._updateTooltip)
+    node.removeEventListener('pointermove', this._updateTooltip)
 
     this._node = null
   }

packages/xo-web/src/xo-app/backup/overview/tab-jobs.js

@@ -160,20 +160,18 @@ const SchedulePreviewBody = decorate([
         />
         {job.runId !== undefined ? (
           <Tooltip content={_('temporarilyDisabled')}>
-            <span>
+            <ActionButton
-              <ActionButton
+              btnStyle='danger'
-                btnStyle='danger'
+              // 2020-01-29 Job cancellation will be disabled until we find a way to make it work.
-                // 2020-01-29 Job cancellation will be disabled until we find a way to make it work.
+              // See https://github.com/vatesfr/xen-orchestra/issues/4657
-                // See https://github.com/vatesfr/xen-orchestra/issues/4657
+              disabled
-                disabled
+              handler={cancelJob}
-                handler={cancelJob}
+              handlerParam={job}
-                handlerParam={job}
+              icon='cancel'
-                icon='cancel'
+              key='cancel'
-                key='cancel'
+              size='small'
-                size='small'
+              tooltip={_('formCancel')}
-                tooltip={_('formCancel')}
+            />
-              />
-            </span>
           </Tooltip>
         ) : (
           <ActionButton

packages/xo-web/src/xo-app/host/tab-advanced.js

@@ -199,12 +199,10 @@ export default class extends Component {
           <Col className='text-xs-right'>
             {!isNetDataPluginCorrectlySet ? (
               <Tooltip content={_('pluginNetDataIsNecessary')}>
-                <span>{telemetryButton}</span>
+                {telemetryButton}
               </Tooltip>
             ) : !_isXcpNgHost ? (
-              <Tooltip content={_('xcpOnlyFeature')}>
+              <Tooltip content={_('xcpOnlyFeature')}>{telemetryButton}</Tooltip>
-                <span>{telemetryButton}</span>
-              </Tooltip>
             ) : (
               telemetryButton
             )}