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

18 Jan 202314 minutes to read

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.

app.jsx

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;

app.tsx

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;

index.jsx

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

index.tsx

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