Diagram Tooltip functionality

[Karthick]

Hello,

I have saved my diagram as JSON in a share path and binding it to view. Now my requirement is to show tool tip for each node based on node name. Ihave couple of questions.

1. Can I add tool tip values or additional info by looping through the diagram JSON in controller before returning to view? (One catch is, i created a swimlane and added nodes into that)

2. Call i call javascript function during tooltip and show the value returned from javascript function?

Please advise.

Thanks,

Karthick

[Shyam G]

Hi Karthick, 

 

Query	Response
Can I add tool tip values or additional info by looping through the diagram JSON in controller before returning to view? (One catch is, i created a swimlane and added nodes into that)	Please use node’s addInfo property to add custom information(tooltip values) and bind it to the script template. When you mouse over on the node, the tooltip appears for the node. please refer to the code example and help documentation below.    Code example:    @*define script template*@  <script type="text/x-jsrender" id="mouseovertooltip">      <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">          <span style="padding: 5px;">{{:addInfo.Designation}}</span>      </div>  </script>                DiagramProperties model = new DiagramProperties();                        model.Tooltip = new Tooltip();              //define mouse over tooltip              model.Tooltip.TemplateId = "mouseovertooltip";                Dictionary<string, object> AddInfo = new Dictionary<string, object>();              //add custom information              AddInfo.Add("Designation", "Managing Director");                BasicShape shape = new BasicShape() { Name = "node1",AddInfo=AddInfo, Width = 100, Height = 100, OffsetX = 200, OffsetY = 200 };              model.Nodes.Add(shape);    Help documentation: https://help.syncfusion.com/aspnetmvc/diagram/tooltip
Call i call javascript function during tooltip and show the value returned from javascript function?	Please use mouseEnter event which triggers when mouse enters the node. in this event, you can get the addInfo value(tooltip value). Please refer to the code example below.    Code example:    //define mouseenter event  model.MouseEnter = "mouseenter";      function mouseenter(args) {          if (args.element) {              var tooltipvalue = args.element.addInfo.Designation;          }      }

 

Regards, 

Shyam G 

 

[Karthick]

Hi Shyam,

Thank you for the suggestion. #2 works fine for my requirement. Sorry for the delay in response.

Thanks,

Karthick

[Shyam G]

Hi Karthick, 

We are happy to hear that your problem is resolved. 

Please let us know if you need further assistance on this. 

Regards, 

Shyam G