Tooltips not positioned correctly

Hi,

I have a multi-page form that uses tabbed panels (as well as other hidden divs), but I've found that if a tooltip is in a container that starts out with display:none, it doesn't seem to know how to find the position of the validation field. Here's an example of the problem:

multipage.html

The tooltips are positioned correctly in Tab 1, but not in Tab 2, presumably because Tab 2 has display:none when the page loads. Is there any way to fix this, so that the tooltip is repositioned when the display property of the parent container is changed?

Thanks for your help!

Thank you for bringing this to our attention, I will log this as a bug to have it looked into by our engineering team.

I have a workaround for the time being, but there is a slight problem. The workaround is to add the following code just before the closing </body> tag:

<script type="text/javascript">
<!--
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{

WA_SpryValidationTooltip_ErrorTips.onresize();
this.showPanel(tab);
};
//-->
</script>

the problem is that if you trigger an error on the first tab, then trigger an error on the second tab, then click back and forth between the tabs, the tooltip will briefly move to the top left of the screen, then reposition itself.

We will look into a better way to fix the issue in a future update to the validation tooltips extension.

Thanks! However, because the form I'm building is interactive, I have a lot of fields that still remain hidden *within* the tabbed panels, and are only displayed if the user answers a previous question a certain way. So I think those fields would still be a problem if the function is only called when a tab is clicked. But based on the code you used, I think I may have a more general solution:

<script type="text/javascript">
<!--
$('input').click(function() {
WA_SpryValidationTooltip_ErrorTips.onresize()
});
$('select').click(function() {
WA_SpryValidationTooltip_ErrorTips.onresize()
});
$('textarea').click(function() {
WA_SpryValidationTooltip_ErrorTips.onresize()
});
}
//-->
</script>

This way, the onresize() function is called whenever any kind of input field is clicked. Other than the slight glitch you mentioned, it seems to have fixed the problem for me. Thanks again for your help!