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

React

Search results

24 May 2022 / 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.

Add a disabled element like the button element into a div whose display style is set to inline-block.
Set the pointer event as none for the disabled element (button) through CSS.
Now, initialize the Tooltip for outer div element that holds the disabled button element.

Source

Preview

App.jsx

index.jsx

index.html

index.css

App.tsx

index.tsx

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-buttons';
export class App extends React.Component {
    constructor() {
        super(...arguments);
        this.tooltip = null;
    }
    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">
            <ButtonComponent id="disabledbutton" disabled={true}>
              Disabled button
            </ButtonComponent>
          </TooltipComponent>
        </div>
        <div style={position}>
          <TooltipComponent content="Tooltip Content" target="#tooltip" style={inline} ref={d => (this.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={this.change.bind(this)}/>
          </div>
        </div>
      </div>);
    }
}

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

<!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/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/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>

#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%;
}

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent, SwitchComponent,ChangeEventArgs } from '@syncfusion/ej2-react-buttons';

export class App extends React.Component<{}, {}> {
  private tooltip: TooltipComponent = null as any;
  private change(args: ChangeEventArgs) {
    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">
            <ButtonComponent id="disabledbutton" disabled={true}>
              Disabled button
            </ButtonComponent>
          </TooltipComponent>
        </div>
        <div style={position}>
          <TooltipComponent
            content="Tooltip Content"
            target="#tooltip"
            style={inline}
            ref={d => (this.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={this.change.bind(this) as any}
            />
          </div>
        </div>
      </div>
    );
  }
}

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

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!