fix(components): show tooltips even if buttons are disabled

related issue: #572

Author: zewa666

packages/selenium-ide/src/neo/components/ActionButtons/ActionButton/index.jsx

@@ -22,18 +22,21 @@ import './style.css'
 
 export default class ActionButton extends React.Component {
   render() {
-    const props = { ...this.props }
+    const { 'data-tip': dataTip, ...props } = { ...this.props }
+
     delete props.isActive
     return (
-      <button
-        type="button"
-        {...props}
-        className={classNames(
-          'btn-action',
-          { active: this.props.isActive },
-          this.props.className
-        )}
-      />
+      <span data-tip={dataTip}>
+        <button
+          type="button"
+          {...props}
+          className={classNames(
+            'btn-action',
+            { active: this.props.isActive },
+            this.props.className
+          )}
+        />
+      </span>
     )
   }
 

packages/selenium-ide/src/neo/components/FlatButton/index.jsx

@@ -25,15 +25,17 @@ export default class FlatButton extends React.Component {
     buttonRef: PropTypes.func,
   }
   render() {
-    const props = { ...this.props }
+    const { 'data-tip': dataTip, ...props } = { ...this.props }
     delete props.buttonRef
     return (
-      <button
-        type="button"
-        ref={this.props.buttonRef}
-        {...props}
-        className={classNames('btn', this.props.className)}
-      />
+      <span data-tip={dataTip}>
+        <button
+          type="button"
+          ref={this.props.buttonRef}
+          {...props}
+          className={classNames('btn', this.props.className)}
+        />
+      </span>
     ) // eslint-disable-line react/prop-types
   }
 }