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.
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:

Created:

Updated:

Platform:

Replies:

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

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 [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>

                </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
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?

Thanks

Jim

Shyam G [Syncfusion]
Replied On December 11, 2015 10:22 AM UTC

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

CONFIRMATION

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.

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

;