How to create a complex tooltip based on a node's addInfo properties and web service calls

[Jim Jacobs]

Hi,

I have tooltips working using a technique previously provided by Syncfusion which is triggered by the mouseEnter / mouseLeave events.
Essentially I show or hide a div which contains what I want to display - see the attached screenshot.

Now that there is formal support in the Diagram control for a tooltip, I'd like to use that.
But looking at the documentation I don't see how I could accomplish what I'm currently doing.

Have a look at the attachment and tell me how I could use the built-in tooltip feature to produce this.

Thanks in advance for any advice.

Jim

Attachment: Syncfusion__Tooltip_Implementation__03dec2015_19e5b71a.zip

[Shyam G]

Hi Jim,

We have created a simple sample to achieve your requirement and it is available in the below link for download. Please refer to the below code snippet which shows how to create a tooltip.

Code snippet:

//Defines mouse over tooltip
DiagramContent.Model.Tooltip = new Tooltip() { TemplateId = "mouseovertooltip" };

<!--Define tooltip template-->

    <script type="text/x-jsrender" id="mouseovertooltip">

                <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">

                                <span style="padding: 5px;">Jim Jacobs</span>

                </div>
</script>

Sample:http://www.syncfusion.com/downloads/support/forum/121347/ze/tooltipsample-1337992251

Also please refer to the below UG link for more details

Link:http://help.syncfusion.com/js/diagram/tooltip

Regards,
Shyam G

[Jim Jacobs]

Hi Shyam.

I don't think you looked at my screenshot.
Your code snippet provides a "static" tooltip solution. 
Not what I need.

I looked at your documentation before I submitted this post.

As the screenshot annotations indicate, my tooltip consists of one section that comes directly from an addInfo property of the node over which the user hovers.
The bottom portion of the tooltip is based on data retrieved from a web service call - but again based on a key value stored in an addInfo property of the node.

With this in mind, is it still possible to achieve this using your tooltip implementation?

Thanks

Jim

[Shyam G]

Hi Jim,

We have created a sample to achieve your requirement.

Sample:http://www.syncfusion.com/downloads/support/forum/121347/ze/jimtooltipsample1208146126

In the above sample, we have created an addInfo property for the node and shown the addInfo value in the tooltip.

Regards,
Shyam G