Onmouseover with disabled buttons

DHTMLx Popup Example onmouseover, onmouseout, onmouseenter and onmouseleave.

by Dr4co

HTML

<script src="https://ideaflyer.s3.amazonaws.com/dhtmlx4/dhtmlx.js"></script>
<link rel="stylesheet" href="https://ideaflyer.s3.amazonaws.com/dhtmlx4/dhtmlx.css">
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<div class="container">
  <form id="myForm">

  <table>
    <tr>
      <td>Button</td>
      <td>Info</td>
      <td>Toggle</td>
    </tr>
    <tr>
      <td>
        <button type="submit" id="enabledButton" onmouseover="showPopup(this);" onmouseout="hidePopup();" class="btn">
    Enabled
        </button>  
      </td>
      <td>Button is enabled on load</td>
      <td>
        <button type="button" onclick="$('#enabledButton').attr('disabled', !$('#enabledButton').is(':disabled'));">
    Enable/Disable Button to the left
        </button>
      </td>
    </tr>
    
    <tr>
       <td>
         <button type="submit" id="disabledButton" disabled="" onmouseover="showPopup(this);" onmouseout="hidePopup();" title="Events are not triggered on disabled DOM elements!"  class="btn">
    Disabled
        </button>
      </td>
       <td>Button is disabled on load</td>
       <td>
        <button type="button" onclick="$('#disabledButton').attr('disabled', !$('#disabledButton').is(':disabled'));">
    Enable/Disable Button to the left
        </button>
      </td>
    </tr>
    
    <tr>
      <td colspan="3"><h4>Workaround for this is to add a div-wrapper around the disabled DOM element</h4>
      </td>
    </tr>

    <tr>
      <td>
        <div onmouseover="showPopup(this);" onmouseout="hidePopup();">
          <button type="submit" id="disabledButton2" disabled="" title="Events are not triggered on disabled DOM elements!" class="btn">
            Disabled2
          </button>
        </div>
      </td>
      <td>Button is disabled on load. This will work in IE, but not in Chrome! In...

CSS

/* Inline code */
code {
  font-size: 87.5%;
  color: #e83e8c;
  word-break: break-word;

  /* Streamline the style when inside anchors to avoid broken underline and more */
  /*a > & {
    color: inherit;
  }*/
}

samp {
  font-family: "SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;
  font-size: 1em; /* Correct the odd `em` font sizing in all browsers. */
}

JavaScript

var myPop;

function showPopup(inp) {
    if (!myPop) {
        myPop = new dhtmlXPopup();
        myPop.attachHTML("You can enter some text into here");
    }
    if (myPop.isVisible()) {
        myPop.hide();
    } else {
        var x = window.dhx4.absLeft(inp); // returns left position related to window
        var y = window.dhx4.absTop(inp); // returns top position related to window
        var w = inp.offsetWidth;
        var h = inp.offsetHeight;
        myPop.show(x,y,w,h);
    }
}   
function hidePopup() {
    if (myPop) myPop.hide();
}