How to have lots of tooltips on a page without an IE warning?

[Shashi Gupta]

Hi,

I have a gridview full of data and I am trying to display a tool-tip for each cell. This amounts to around 1550 tool-tips. When i do this I get an IE pop-up : "Stop running this script?" since the javascript takes a long time to execute. I also get this pop-up warning everytime I do a post-back to redisplay the data. I tried doing this with both RadToolTip as well as RadToolTipManager with similar result. Is there a way to efficiently display 1500 tool-tips on a page without this IE pop-up warning?

I am using version 2008.2.723.20 of the RadToolTip.

Thanks,

Shashi

[Svetlina Anati]

Hello Shashi,

I built up a test demo consisting of a RadGrid with 1500 records and each item is tooltipified with a RadToolTipManager and I tested with the 2008.2.723.20 version under IE but unfortunately to no avail - I could not reproduce the problem you report. Would you please take a look at my test demo which I attached for your reference and let me know if I am doing something wrong?

On a side note, a lot of improvements has been applied to RadControls since the version you are using was released. Those improvements are in many fields including performance and the size of the used resources. I strongly recommend to upgrade to the latest release - this will not only most probably fix the problem you face but you will also be able to enjoy the new features, look and feel, faster and smoother performance and even new controls which were implemented. I understand that an upgrade will take some time and efforts but the benefits from it will be much more than the inconvenience and if you decide to upgrade you can also rely on our help for resolving any problem you might face during the upgrade. 


Greetings,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Shashi Gupta]

Svetlina,

Thanks for your help. I tried running the example you sent and I got the same error while loading the page. Either your IE runs much faster than mine or you have disabled or changed the IE setting. I believe by default IE pops up the warning message if a script takes more than a certain time to run.

The culprit is the following javascript function...as the item count increases the script takes much longer to run....

Sys.Application.add_init(function() {

    $create(Telerik.Web.UI.RadToolTipManager, {"clientStateFieldID":"RadToolTipManager1_ClientState","formID":"form1","height":"200px","isToolTipFactory":true,"loadOnDemand":true,"relativeTo":1,"skin":"Default","targetControls":"[['Grid1_ctl00__0','Grid1_ctl00__0',''],['Grid1_ctl00__1','Grid1_ctl00__1',''],['Grid1_ctl00__2','Grid1_ctl00__2',''],['Grid1_ctl00__3','Grid1_ctl00__3',''],['Grid1_ctl00__4','Grid1_ctl00__4',''],['Grid1_ctl00__5','Grid1_ctl00__5',''],['Grid1_ctl00__6','Grid1_ctl00__6','']
......

I am not sure at this point if upgrading to the newer version is going to solve my problem. Do the newer version of RadControls do this any differently? That is, will the newer version not output a similar javascript method with 1500 items?

Perhaps I am going about this the wrong way. Is there some other Telerik control I can use that basically pops-up a window when a user clicks on a grid-cell...a control that does not create a similar long javascript method?

Thanks,

Shashi

[Svetlina Anati]

Hello Shashi,

I am not sure why you get the problem since I am testing with default browser settings and it works fine on my side.

What I can suggest is the following:

1) Upgrade to the latest version - I cannot ensure you that this will resolve the issue because I do not reproduce it locally and thus I cannot find difference when testing with the both different versions. However, as I already explained performance improvements are applied to all RadControls continuously and upgrading often resolves performance problems.

2) Create every needed single tooltip on demand on the client. In this manner you will not have 1500 tooltips but a new one will be created only if needed, e.g if the user hovers over 10 targets you will have resultant 10 tooltips instead of 1500. To do this you should use the createToolTip method as shown in the demos below:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltiptreeview/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltipcalendar/defaultcs.aspx

3) Use paging for your grid to reduce the resultant HTML of the page and to also not have that many targets. A sample demo with tooltipified grid with paging is available below:


http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx


All the best,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Shashi Gupta]

Svetlina,

Thanks for your help. I have cut down the number of tooltips in our app by replacing the Tabs with a dropdown. We don't have any performance problems with the page anymore.

Cheers,

Shashi