React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

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

20 Apr 2021 / 1 minute 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.
Source
Preview
index.tsx
index.html
index.css
index.jsx
Copied to clipboard
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';

class App extends React.Component<{}, {}> {
  private tooltip: TooltipComponent;
  private change(args) {
    if (!args.checked) {
      this.tooltip.destroy();
    } else {
      this.tooltip.render();
    }
  }
  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 => this.tooltip = d} >
              <button className="e-btn" id="tooltip" style={margin}>Show Tooltip</button>
            </TooltipComponent>
            <div className="switchContainer">
                <label for="checked" style={padding}>Enable Tooltip</label>
                <SwitchComponent id="checked" checked={true} change={this.change.bind(this)}></SwitchComponent>
            </div>
        </div>
    </div>
    );
  }
}
ReactDom.render(<App />,document.getElementById('sample'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.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>
Copied to clipboard
#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%;
}
Copied to clipboard
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';
class App extends React.Component {
    change(args) {
        if (!args.checked) {
            this.tooltip.destroy();
        }
        else {
            this.tooltip.render();
        }
    }
    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 => this.tooltip = d}>
              <button className="e-btn" id="tooltip" style={margin}>Show Tooltip</button>
            </TooltipComponent>
            <div className="switchContainer">
                <label for="checked" style={padding}>Enable Tooltip</label>
                <SwitchComponent id="checked" checked={true} change={this.change.bind(this)}></SwitchComponent>
            </div>
        </div>
    </div>);
    }
}
ReactDom.render(<App />, document.getElementById('sample'));
Previous
Next