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