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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





121347 Dec 3,2015 04:53 PM UTC Dec 11,2015 10:22 AM UTC ASP.NET Web Forms 3
Tags: Diagram
Jim Jacobs
Asked On December 3, 2015 04:53 PM UTC


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

Shyam G [Syncfusion]
Replied On 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

Jim Jacobs
Replied On 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?



Shyam G [Syncfusion]
Replied On 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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon