Show Tooltip on disabled elements and disable Tooltip in React Tooltip component

4 Sep 202616 minutes to read

By default, React Tooltips are not displayed on disabled elements. However, it is possible to enable this behavior by following the steps below.

  1. Add a disabled element (such as a button) into a div element with its display style set to inline-block.
  2. Set the pointer-events property to none for the disabled element (button) through CSS.
  3. Initialize the React Tooltip for the outer div element that contains the disabled button element.
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-buttons';
function App() {
  let tooltip = null;
  function change(args) {
    if (!args.checked) {
      tooltip.destroy();
    }
    else {
      tooltip.render();
    }
  }
  let box = {
    display: "inline-block"
  };
  let position = {
    position: "relative",
    top: "75px",
    transform: "translateX(-10%)"
  };
  let padding = {
    padding: "0 25px 0 0"
  };
  let inline = {
    display: "inline-block "
  };
  let margin = {
    margin: "50px"
  };
  return (<div id="container">
    <div id="box" style={box}>
      <TooltipComponent id="box" content="Tooltip from disabled element">
        <ButtonComponent id="disabledbutton" disabled={true}>
          Disabled button
        </ButtonComponent>
      </TooltipComponent>
    </div>
    <div style={position}>
      <TooltipComponent content="Tooltip Content" target="#tooltip" style={inline} ref={d => (tooltip = d)}>
        <ButtonComponent id="tooltip" style={margin}>
          Show Tooltip
        </ButtonComponent>
      </TooltipComponent>
      <div className="switchContainer">
        <label htmlFor="checked" style={padding}>
          Enable Tooltip
        </label>
        <SwitchComponent id="checked" checked={true} change={change.bind(this)} />
      </div>
    </div>
  </div>);
}
export default App;
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent, SwitchComponent, ChangeEventArgs } from '@syncfusion/ej2-react-buttons';

function App() {
  let tooltip: TooltipComponent = null as any;
  function change(args: ChangeEventArgs) {
    if (!args.checked) {
      tooltip.destroy();
    } else {
      tooltip.render();
    }
  }
  let box: object = {
    display: "inline-block"
  };
  let position: object = {
    position: "relative",
    top: "75px",
    transform: "translateX(-10%)"
  };
  let padding: object = {
    padding: "0 25px 0 0"
  };
  let inline: object = {
    display: "inline-block "
  };
  let margin: object = {
    margin: "50px"
  };
  return (
    <div id="container">
      <div id="box" style={box}>
        <TooltipComponent id="box" content="Tooltip from disabled element">
          <ButtonComponent id="disabledbutton" disabled={true}>
            Disabled button
          </ButtonComponent>
        </TooltipComponent>
      </div>
      <div style={position}>
        <TooltipComponent
          content="Tooltip Content"
          target="#tooltip"
          style={inline}
          ref={d => (tooltip = d as any)}
        >
          <ButtonComponent id="tooltip" style={margin}>
            Show Tooltip
          </ButtonComponent>
        </TooltipComponent>
        <div className="switchContainer">
          <label htmlFor="checked" style={padding}>
            Enable Tooltip
          </label>
          <SwitchComponent
            id="checked"
            checked={true}
            change={change.bind(this) as any}
          />
        </div>
      </div>
    </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
function App() {
    let tooltip;
    function change(args) {
        if (!args.checked) {
            tooltip.destroy();
        }
        else {
            tooltip.render();
        }
    }
    let box = {
        display: 'inline-block'
    };
    let position = {
        position: 'relative', top: '75px', transform: 'translateX(-10%)'
    };
    let padding = {
        padding: '0 25px 0 0'
    };
    let inline = {
        display: 'inline-block '
    };
    let margin = {
        margin: '50px'
    };
    return (<div id='container'>
        <div id="box" style={box}>
            <TooltipComponent id="box" content='Tooltip from disabled element'>
                <button className="e-btn" id="disabledbutton" disabled={true}>Disabled button</button>
            </TooltipComponent>
        </div>
        <div style={position}>
            <TooltipComponent content='Tooltip Content' target='#tooltip' style={inline} ref={d =>tooltip = d}>
                <button className="e-btn" id="tooltip" style={margin}>Show Tooltip</button>
            </TooltipComponent>
            <div className="switchContainer">
                <label htmlFor="checked" style={padding}>Enable Tooltip</label>
                <SwitchComponent id="checked" checked={true} change={change.bind(this)}></SwitchComponent>
            </div>
        </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  let tooltip: TooltipComponent;
  function change(args) {
    if (!args.checked) {
      tooltip.destroy();
    } else {
      tooltip.render();
    }
  }
  let box: object = {
    display: 'inline-block'
  }
  let position: object = {
    position: 'relative', top: '75px', transform: 'translateX(-10%)'
  }
  let padding: object = {
    padding: '0 25px 0 0'
  }
  let inline: object = {
    display: 'inline-block '
  }
  let margin: object = {
    margin: '50px'
  }
  return (
    <div id='container'>
      <div id="box" style={box}>
        <TooltipComponent id="box" content='Tooltip from disabled element'>
          <button className="e-btn" id="disabledbutton" disabled={true}>Disabled button</button>
        </TooltipComponent>
      </div>
      <div style={position}>
        <TooltipComponent content='Tooltip Content' target='#tooltip' style={inline} ref={d =>tooltip = d} >
          <button className="e-btn" id="tooltip" style={margin}>Show Tooltip</button>
        </TooltipComponent>
        <div className="switchContainer">
          <label htmlFor="checked" style={padding}>Enable Tooltip</label>
          <SwitchComponent id="checked" checked={true} change={change.bind(this)}></SwitchComponent>
        </div>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
#container {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 75px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#disabledbutton {
    pointer-events: none;
    font-size: 14px;
    padding: 5px;
}

.e-tooltip-wrap.e-popup .e-tip-content {
    padding: 10px;
    font-size: 14px;
}

#tooltip {
    position: relative;
    transform: translateX(-50%);
}

.switchContainer {
    vertical-align: sub;
    display: inline-block;
    position: relative;
    left: 3%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>