JavaScript (ES5) control

JavaScript (ES5)

Search results

06 Jun 2023 / 1 minute to read

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

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.
Initialize the tooltip for outer div element that holds the disabled button element.

Source

Preview

index.js

index.html

index.css

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

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

//Initialize Button component
var button = new ej.buttons.Button();
//Render initialized Button component
button.appendTo('#tooltip');

//Initialize Tooltip component
var tooltipObj_2 = new ej.popups.Tooltip({
  //Set tooltip content
  content: 'Lets go green & Save Earth !!!',
  beforeRender: function(args) {
     if (!(document.getElementById('checked')).checked) {
       args.cancel = true;
     }
  }
});
//Render initialized Tooltip component
tooltipObj_2.appendTo('#tooltip');

var switchObj = new ej.buttons.Switch({
  value: 'USB tethering',
  checked: true,
  change: function(args) {
    if ((document.getElementById('checked')).checked) {
      var tooltipObj_2 = new ej.popups.Tooltip({
        //Set tooltip content
        content: "Lets go green & Save Earth !!!"
      });
      tooltipObj_2.appendTo('#tooltip');
    } 
  }
});
switchObj.appendTo('#checked');

<!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.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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%;
}

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

Show tooltip on disabled elements and disable tooltip