Search results

Show tooltip on disabled elements and disable tooltip

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

  1. Add a disabled element like the button element into a div whose display style is set to inline-block.
  2. Set the pointer event as none for the disabled element (button) through CSS.
  3. Now, initialize the Tooltip for outer div element that holds the disabled button element.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-buttons';

class App extends React.Component<{}, {}> {
  private tooltip: TooltipComponent = null as any;
  private change(args: ChangeEventArgs) {
    if (!args.checked) {
    } else {
  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
        <div style={position}>
            content="Tooltip Content"
            ref={d => (this.tooltip = d as any)}
            <ButtonComponent id="tooltip" style={margin}>
              Show Tooltip
          <div className="switchContainer">
            <label htmlFor="checked" style={padding}>
              Enable Tooltip
              change={this.change.bind(this) as any}
ReactDom.render(<App />,document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

    <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="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>

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

#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: 22px;
    padding: 10px;

.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%;