Tooltip using div sometimes displays in the wrong place

I am using a set of javascript functions to display tooltips. It uses the div element at a high z-index. It works rather nicely most of the time. However, if there is another div on the page near where the tooltip is supposed to be, that is moved using position:relative, then the tooltip is displaced by a strange amount and does not seem to respond to its own positioning properly.

Anyone have any insight into a workaround for this?
jasimon9Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

EsopoCommented:
BatalfCommented:
If an absolute positioned div is inserted as a child element of a div with position:relative, then the left and top position is measured according to the top left corner of the relative positioned div.

Another alternative for you could perhaps be the title attribute. The title attribute is supported for a lot of tags.

example:

<a href="#" title="This is a simple test">Test</a>
jasimon9Author Commented:
Esopo: tried the link and for some reason, the body of the page after the word "Example:" appeared blank.
C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

jasimon9Author Commented:
Batalf:

I was wondering about the relative "nesting" of the divs as being part of the problem. However, as stated in the documentation for the javascript I am using, the following div must be the first element immediately after the <body> tag:

<body>
<DIV id="ToolTips" style="visibility:hidden;position:absolute;z-index:1000;top:-100"></DIV>

So it appears that this div could not be a child element of another div.

I used title attributes in many places, but they are not appropriate for the rollovers that I am providing, which in some cases have extensive text, and rely on HTML formatting.
EsopoCommented:
>> tried the link and for some reason, the body of the page after the word "Example:" appeared blank.<<
That's what happens when you forget to check with both browsers ;) - It's fixed now.
jasimon9Author Commented:
Thanks. The tooltip is am using is much fancier in the formatting. And much more complicated, so it is hard to see what the same function invoked in different places on the same page has such a different result.

I have spent too much time on this already, and at this point am willing to accept the wrong positioning as a "known bug," since we are in the process of rewriting the site anyway, and this code will go away "real soon now."
EsopoCommented:
>>The tooltip is am using is much fancier in the formatting.<<
Well, considering it is CSS, you can do pretty much anything you want to it, including adding graphics.
jasimon9Author Commented:
You are probably right, and I can probably do without some of the features. For example, there is a "title bar" at the top of the tool tip that I don't see right away how to do that with CSS.

One way might be to show two 2 tooltips, closely positioned so as to give the same effect.
EsopoCommented:
If you show me an example of your tooltip code, I'll probably be able to replicate it with CSS.
jasimon9Author Commented:
http://migoicons.tripod.com

click on Dhtml scripts > Tip message. Then download dhtml1.5 for full documentation, etc.
EsopoCommented:
Ok. Since you didn't give me an example to replicate, I did a random style to illustrate what you can do with CSS styling and a few graphics:

This is the CSS style to play with:
****************************
<style type="text/css">
.ToolText{position:relative; height:10px; }
.ToolTextHover{position:relative; height:10px; }
.ToolText span{display: none;}

.ToolTextHover span{
  display:block;
  position:absolute;
  background-image:url(http://www.ilearnhtml.com/practice/background.jpg);
  width:240px;
  border-color:#333333;
  border-style:groove;
  border-width:2px;
  top:1.3em;
  left:15px;
  color:#660000;
  text-align: center;
}
</style>
****************************



And the HTML code to use the tooltip:
****************************
Hover over
<span class="ToolText" onMouseOver="javascript:this.className='ToolTextHover'"
 onMouseOut="javascript:this.className='ToolText'">

THIS TEXT RIGHT HERE

<span>
<img src="http://www.ou.edu/image/bullet/red_bullet.gif">
<strong>This is the title:</strong><br>
 And this is the Tooltip's text </span>
 </span>
to see the tooltip.
****************************

Basically, you can add anything to the content of the tooltip, just put it inside the <span></span> tags after the text that triggers the tooltip. You can also modify the look and feel of your tooltip by playing with the CSS style.
dmsblnCommented:
Check out this really excellent JS-Class: http://www.walterzorn.com/tooltip/tooltip_e.htm

Take a look at the examples. This should fit all your needs. You will be able to set a Title for your tooltip with this.T_TITLE

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jasimon9Author Commented:
Both answers are really great. the JS method is very similar to to what I am now using, and has a few more features, as well as being more current, and thus one would hope more robust.

The CSS method has the virtue of avoiding Javascript, and may have enough functionality for my purpuse.

Therefore, I am raising the points and splitting.
EsopoCommented:
Glad to help!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.