close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Tooltips not positioned correctly

Thread began 8/16/2011 1:38 pm by lhadjchikh429313 | Last modified 8/17/2011 4:40 pm by lhadjchikh429313 | 1972 views | 2 replies |

lhadjchikh429313

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!

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

lhadjchikh429313

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!

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...