How to display text when mouse hovers over node

Question

Does anyone have a sample showing how to display text on a node when the mouse hovers over it?

I'm looking for a sample using plain Javascript - not TypeScript, nor React, etc - using Essential JS 2.

Thank you.

Aravind Ravi · Accepted Answer

Hi Roy, 

We have created a sample to show text while mouseHover on the node.  By using the annotations property of node, we can able to show text on the node. Initially set visibility as false for the annotation through visibility property. When we mouse hover on node, mouseOver event gets triggered. In that event, through actualObject we can get the node. After get the node, set the annotations visibility as true.  
When we leave the node, mouseLeave event gets triggered. In that event , through element we can get the node. Through node set node annotation’s visibility as false. Please refer to the below code snippet and sample 





function mouseOver(args) { 
      if(args.actualObject.inEdges) { 
        var node = args.actualObject; 
        if(node.annotations.length > 0) { 
          node.annotations[0].visibility = true; 
          diagram.dataBind();  
        } 
      } 
    } 

    function mouseLeave(args) { 
       var node = args.element; 
        if(node.annotations.length > 0) { 
          node.annotations[0].visibility = false; 
          diagram.dataBind();  
        } 
    } 

Sample: https://stackblitz.com/edit/tpcyrq 

Regards 
Aravind Ravi

Roy · Answer

Thank for the sample!Apparently, I am missing a library as I'm getting the following exception:Uncaught (in promise) TypeError: Cannot read property 'dataBind' of undefined at t.mouseOver (grapher.js:163) at e.notify (constants.js:93) at t.e.trigger (constants.js:93) at t. (constants.js:93) at constants.js:93 at Object.next (constants.js:93) at constants.js:93 at new Promise () at M3 (constants.js:93) at t.triggerEvent (constants.js:93)Even when I copied an pasted the provided sample, I still receive the exception.Where is dataBind defined?Thank you!

Aravind Ravi · Answer

Hi Roy, 
 
The diagram dataBind method is used to apply all the pending property changes to the component.  We suspect that you call dataBind function through other instance, so that dataBind of undefined exceotion occurs. So please use dataBind from the diagram instance, so you can use the dataBind method in your sample. Please refer below code snippet 
 




Solution 1: 
 
//Initialize the diagram 
    diagram = new ej.diagrams.Diagram({ 
id: ‘diagram’, 
        width: '100%', height: '645px', nodes: nodes, connectors: connections, 
        mouseOver: mouseOver, 
        mouseLeave: mouseLeave 
 
    }); 
    diagram.appendTo('#diagram'); 
 
function mouseOver(args) { 
      if(args.actualObject.inEdges) { 
        var node = args.actualObject; 
        if(node.annotations.length > 0) { 
          node.annotations[0].visibility = true; 
//Here diagram is an instance of diagram component 
          diagram.dataBind();  
        } 
      } 
    } 
 
Solution 2:  
 
function mouseOver(args) { 
      if(args.actualObject.inEdges) { 
        var node = args.actualObject; 
        if(node.annotations.length > 0) { 
          node.annotations[0].visibility = true; 
//Here diagram is an id of a diagram component 
var diagram = document.getElementById(‘diagram’).ej2_instances[0]; 
          diagram.dataBind();  
        } 
      } 
    } 
 
In case if the issue still persists, please share us a simple sample illustrating issue. This would help us to serve you better. 
 
Regards 
Aravind Ravi

Roy · Answer

I understand now. Thank you for your patience.Respectfully, Roy

Aravind Ravi · Answer

Hi Roy 

Thanks for the update. 

Regards 
Aravind Ravi