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

Show tooltip on disabled elements and disable tooltip in JavaScript Tooltip control

30 Mar 2023 / 2 minutes to read

By default, tooltips will not be displayed on disabled elements. However, you can enable this behavior by using the following steps:

  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. Initialize the tooltip for outer div element that holds the disabled button element.
Source
Preview
index.ts
index.html
index.css
Copied to clipboard
import { Tooltip } from '@syncfusion/ej2-popups';
import { Button, Switch } from '@syncfusion/ej2-buttons';

let tooltipObj_1: Tooltip = new Tooltip({
  content: 'Tooltip from disabled element'
});
tooltipObj_1.appendTo('#box');


//Initialize Button component
let buttonObj_1: Button = new Button({
  disabled: true
});
//Render initialized Button component
buttonObj_1.appendTo('#disabledbutton');

//Initialize Button component
let button: Button = new Button();
//Render initialized Button component
button.appendTo('#tooltip');

//Initialize Tooltip component
let tooltipObj_2: Tooltip = new Tooltip({
  //Set tooltip content
  content: 'Lets go green & Save Earth !!!'
});
//Render initialized Tooltip component
tooltipObj_2.appendTo('#tooltip');

let switchObj: Switch = new Switch({
  value: 'USB tethering',
  checked: true,
  change: (args) => {
if ((document.getElementById('checked') as HTMLInputElement).checked) {
  let tooltipObj_2: Tooltip = new Tooltip({
    //Set tooltip content
    content: "Lets go green & Save Earth !!!"
  });
  //Render initialized Tooltip component
  tooltipObj_2.appendTo('#tooltip');
} else {
  tooltipObj_2.destroy();
}
  }
});
switchObj.appendTo('#checked');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.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='loader'>LOADING....</div>
    <div id='container'>
        <div id="box" style="display: inline-block;">
            <input type="button" id="disabledbutton" value="Disabled button" />
        </div>
        <div style="position: relative;top: 75px;">
            <!-- Tooltip element -->
            <button id="tooltip">Show Tooltip</button>
            <div class="switchContainer">
                <label for="checked" style="padding: 0 25px 0 0">Enable Tooltip</label>
                <input id="checked" type="checkbox" />
            </div>
        </div>
    </div>
</body>

</html>
Copied to clipboard
#container {
    visibility: hidden;
    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: 22px;
    padding: 10px;
}

.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%;
}
Previous
Next