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.
- Add a disabled element like the
buttonelement into a div whose display style is set toinline-block. - Set the pointer event as
nonefor the disabled element (button) through CSS. - Now, initialize the Tooltip for outer div element that holds the disabled button element.
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;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;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 for="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'));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 for="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'));