We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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


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.


Attachment: Syncfusion__Tooltip_Implementation__03dec2015_19e5b71a.zip

3 Replies

SG Shyam G Syncfusion Team December 7, 2015 04:11 PM UTC

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>



Also please refer to the below UG link for more details


Shyam G

JJ Jim Jacobs December 10, 2015 08:24 PM UTC

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?



SG Shyam G Syncfusion Team December 11, 2015 10:22 AM UTC

Hi Jim,

We have created a sample to achieve your requirement.


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

Shyam G

Live Chat Icon For mobile
Up arrow icon