Advanced Tooltips Support Product Page

In progress

Tooltip displays in wrong place in some browsers

Reported 12 Apr 2012 17:06:46
3
have this problem
12 Apr 2012 17:06:46 Neil Morphew posted:
I wanted to add this problem even though I found a solution to it, so that it may help others in the future.

When I added a tooltip to the <a> tag it worked correctly in Safari & Chrome but not in IE9 (although IE8 worked), Opera & Firefox. In those browsers it would be offset from where it should be, although the tooltip itself worked OK.

If I moved the tooltip behavior to the <image> tag that was within the <a> tag, it positioned correctly in all browsers.

Just something to bear in mind if you have a similar problem.

By the way I was using <!DOCTYPE HTML> which seems to cause another problem with the tooltips so it may be worth looking into that as well.

Hope it helps.

Replies

Replied 17 Apr 2012 07:18:41
17 Apr 2012 07:18:41 Teodor Kuduschiev replied:
Hello Neil,

Please provide a link to your page.
Replied 11 Nov 2012 19:42:43
11 Nov 2012 19:42:43 Sam Bisignano replied:
Teodor and Neil,

I had the same problem with the ToolTip not being displayed where it should. It was showing up correctly, but at the top of the page. I tested it on three different Servers.

A Linux Server - shared web hosting plan
A Linux Server - Dedicated Managed Server
A Windows Server 2008 - Dedicated Server.

It now works on all three servers and the problem I discovered is that for the Linux plans, the styles folder must be "Styles" not "styles". Seems like a simple problem, but it did make it all work.

All three files are identical with the exception of a title
Windows Server, Linux Server, etc.
Here is my code for the Linux Server - Shared Plan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxTooltips.js"></script>
<script type="text/javascript">
<!--
function applyDMXTooltip(trigger) {//v1.5
if (arguments.length < 3 || !arguments[2]) return true; // ignore empty tooltips
window.stylesFolderName = 'Styles';
var arg = {};
var options = ['contentType', 'dataProvider','showEffect','easing','showAt',
'showDirection', 'showDuration','showDelay','closeEvent','styleTheme',
'showCloseBtn','onshow','onhide','mouseOffsetX','mouseOffsetY','x','y','w','h'];
for (var i = 0; i < options.length && i < arguments.length-1; i++) {
arg[options[i]] = arguments[i + 1];
}
showTooltip(trigger, arg);
}
//-->
</script>
</head>

<body>

<p>&nbsp;</p>
<p>Linux Server - Shared Plan</p>
<p>&nbsp;</p>
<p>Create Rich Media ToolTips, provide online help, zoom in to images, display <a href="#" onmouseover="applyDMXTooltip(this,'','Rich Media Content can contain a combination of forms','fade','easeOutQuad','mouse','in',600,600,'mouseout','bluebevel',false,'','',0,0,'auto','auto','auto','auto')">rich content</a> and tips with just a few clicks.</p>
<p>&nbsp;</p>
</body>
</html>

Replied 12 Nov 2012 08:03:31
12 Nov 2012 08:03:31 Vulcho Vulev replied:
Hello Sam.

Thank you for your contribution.

Regards:Vulcho.

Reply to this topic