By default, Tooltips will not be displayed on disabled elements. However, it is possible to enable this behavior by following the steps below.
button
element into a div whose display style is set to inline-block
.none
for the disabled element (button) through CSS.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'));
<!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>
#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 * 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'));