title: In Cytoscape.js, using HTML in node labels, how can I handle events on a certain DOM element in the HTML label?
body: <p>I'm using Cytoscape.js with the <a href="https://github.com/kaluginserg/cytoscape-node-html-label" rel="nofollow noreferrer">cytoscape-node-html-label</a> extension to draw a complex HTML node. <strong>My goal is to show a tooltip when the user hovers over a <em>certain area</em> in this HTML node.</strong> However, I can't seem to access the mouse events at all. I can listen for mouse events over the whole node by using Cytoscapes functionality:</p>
  
  <pre><code>cy.on('mouseover', 'node', function(evt){
     var node = evt.target;
  });
  </code></pre>
  
  <p>But trying to use regular jQuery events on an HTML element inside the node label (they have unique ids) does not work. The event does not fire. I guess it's because this HTML is somehow drawn in the canvas and the extension does not implement this functionality. I tried:</p>
  
  <pre><code>$('#' + id_of_elem).hover(function(evt){
     ...
  });
  </code></pre>
  
  <p>The extension offers an option to enable pointer events but it does not change anything. I configure the extension like this:</p>
  
  <pre><code>cy.nodeHtmlLabel([{
          query: '.machineNode',
          valign: 'center',
          halign: 'center',
          valignBox: 'center',
          halignBox: 'center',
          tpl: function(data) {
              return [HTML code here];
          }
        }
      ], {
        enablePointerEvents: true
      });
  </code></pre>
  
  <p>Does anyone have an idea how to accomplish my goal? Alternative ideas are welcome. Do you think there is a way to implement the events?</p>