Show Tooltip on disabled elements in the EJ2 TypeScript Tooltip control

27 Feb 20254 minutes to read

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

  1. Add a disabled element, like a button, inside a div whose display style is set to inline-block.
  2. Set the pointer-events property to none for the disabled element (button) through CSS.
  3. Initialize the Tooltip for the outer div element that contains the disabled button element.
import { Tooltip } from '@syncfusion/ej2-popups';

let tooltipObj_1: Tooltip = new Tooltip({
  content: 'Tooltip from disabled element'
});
tooltipObj_1.appendTo('#box');
<!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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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>
        #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%;
        }
    </style>
</body>

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