views:

748

answers:

2

My problem is related to using the JQuery Tools Tooltip Plugin (http://flowplayer.org/tools/tooltip.html) on items with tooltips that are refreshed in asp.net UpdatePanel controls. The problem is that after the tooltips have been added, any partial postback from an UpdatePanel will cause the tooltips to stop working in any of the UpdatePanels that were updated. The tooltips work great until a partial postback. Below is an example of how I am adding tooltips to images (and other controls) on the page. Some code has been ommitted for simplicity:

<script type="text/javascript">
//--call this to add tooltips to any element with a class of "tooltipHandle"
function createTooltip(){

    // select all desired input fields and attach tooltips to them
    $(".tooltipHandle").tooltip({
    // place tooltip on the right edge
    position: ['center', 'right'],
    // a little tweaking of the position
    offset: [-2, 10],

    // use a simple show/hide effect
    effect: 'toggle',

    // custom opacity setting
    opacity: 0.7
    });

}

//--add tooltips after every postback (including partial AJAX postbacks)
function pageLoad(sender, args) {
    createTooltip(); 
}
</script>

<html>
<!-- assume this UpdatePanel is updated from the code behind--!>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="upPanelPrivateMediaList">
    <ContentTemplate>
    <img class="tooltipHandle" src="/images/questionMark.gif"/>
    <div class="tooltip">SOME GREAT TOOLTIP CONTENT</div>

    </ContentTemplate>
</asp:UpdatePanel>   

</html>

One thing that is very interesting is that if I do NOT call "createToolTip()" the first time the page loads, a partial postback will properly add the tooltip to my image and it will work until I do a second postback. This means that partial postbacks only hose up tooltips if the tooltips already exist. Calling createToolTip() manually after a partial postback does nothing to get the tooltip working again.

Please let me know if you have any ideas or need clarification. Thanks in advance!!

+1  A: 

I ended up having to change the tooltip .js file (tools.tooltip-1.1.0.js) as follows:

// jQuery plugin implementation
$.prototype.tooltip = function(conf) {

// return existing instance
var api = this.eq(typeof conf == 'number' ? conf : 0).data("tooltip");
//-- Caching up the api does not work with .NET AJAX postbacks.
//if (api) { return api; }

Long story short, it was returning before the subsequent code which would setup the tooltip because it didn't realize the elements had been refreshed by the update panel. While we are likely taking a small performance hit from this, it did solve the problem for now.

jakejgordon
A: 

As jakejgordon said, caching elements won't work because after a partial update, they're not the same elements anymore.

Have you considered using event delegation model? You don't need to keep binding events each time there is a partial update. Here's an interesting article - http://www.learningjquery.com/2009/12/simple-tooltip-for-huge-number-of-elements

Chetan Sastry