Setting tooltip content (problem with IE)

[Jonathan]

What I'm trying to do

I have an ASP.NET page which shows a list of items.  Once the page has loaded, I perform an AJAX call to go and get the stock for every item.  When the AJAX call returns, we then display an "in stock" or "out of stock" icon with an associated tooltip for each item.  The tooltip will display the actual stock.

The problem
The tooltip is not just text but has formatting in it.  I have got my code to work in Firefox 4, but it doesn't work in Internet Explorer 8.

The code
The tooltip text template is:

In stock - <span style='color: #ff0000;'>[[stock]]</span> items

When the page first loads, I have a hidden label (style display = none) and I set this label's text property to that of the template text.

When my AJAX call returns, it runs a function.  This function iterates through each item and performs the following:

tooltip.show();
tooltip.set_contentElement(inStockTextCached);
var content = tooltip.get_content().replace(""[[stock]]"", fields[" + QoHDisplay.QuantityOrdinal + @"]);
tooltip.set_content(content);
tooltip.hide();

Okay, a quick explanation of this JavaScript:

tooltip.show();
If I don't add this then I get an error if I attempt the next line.  The error is "this._contentCell is null" and the solution was posted here: http://www.telerik.com/community/forums/aspnet-ajax/tooltip/client-side-set-content-to-dom-element.aspx

tooltip.set_contentElement(inStockTextCached);
Earlier on in the function I create a reference "inStockTextCached" to the label that holds the template text.  I then set the tooltip's content element to be the same.

In Firefox 4 and Chrome, calling set_contentElement(inStockTextCached) works fine but in InternetExplorer it does not work.

var content = tooltip.get_content().replace(""[[stock]]"", fields[" + StockOrdinal + @"]);

Here, I load the content of the tooltip and "[[stock]]" with the actual stock value returned from the AJAX call.

tooltip.set_content(content);
I then attempt to update the content of the tooltip

tooltip.hide();
I had to show the tooltip to prevent the error, but ideally I don't want it to show when it first loads....this is my attempt to therefore hide it (but that doesn't seem to have the desired effect).


Any help would be much appreciated.

Thanks in advance

Griff

[Jonathan]

This has now been fixed.

Originally, outside of the function I created a reference to the template element:

var inStockIconCached = document.getElementById('" + qohInStockIcon.ClientID + @"');

Then inside the function when I inspected the .innerHTML property it displayed the expected value when using Firefox & Chrome, but it was blank when using IE.

I simply moved this inside the function, inside the bit where it iterates through each item.  Now, the innerHTML value was correct in all browsers.

A bit odd - I preferred my first implementation since it set the pointer just once, rather than having to set it x number of times (once for each item).

Ho hum

[Svetlina Anati]

Hello Jonathan,

 I am not completely sure when you execute your code but here is what I suggest:

1) Use the OnClientShow event to set the new content - at that time the UI is created and you will not get the problem with null reference. In addition, you should not get a visual problem in setting the content there because it will be fast and it is better than showing and hiding the tooltip.

2) As to the text, I suggets to get the desired text and simply use the set_text client method. The method set_contentElement accepts an HTML element - a possible solution is to create dynamically the span by using document.createElement but the set_text method would be easier to use.

At last, if you need additional assistance, please prepare a very simple page which is fully runnable (e.g a label with hard coded test text, target for tooltip and how you set the content) and share its full source code here along with detailed explanation of the desired result. Once you provide this, I will built up a test page on my side and I will modify it in order to meet your requirements so that you will be then able to apply the same logic in your original application.

Best wishes,
Svetlina
the Telerik team