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?
Anyone have any insight into a workaround for this?
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>
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>
ASKER
Esopo: tried the link and for some reason, the body of the page after the word "Example:" appeared blank.
ASKER
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;p
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.
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;p
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.
>> 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.
That's what happens when you forget to check with both browsers ;) - It's fixed now.
ASKER
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."
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."
>>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.
Well, considering it is CSS, you can do pretty much anything you want to it, including adding graphics.
ASKER
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.
One way might be to show two 2 tooltips, closely positioned so as to give the same effect.
If you show me an example of your tooltip code, I'll probably be able to replicate it with CSS.
ASKER
http://migoicons.tripod.com
click on Dhtml scripts > Tip message. Then download dhtml1.5 for full documentation, etc.
click on Dhtml scripts > Tip message. Then download dhtml1.5 for full documentation, etc.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
Glad to help!
http://www.netbulge.com/index.php?session=0&action=read&click=open&article=1120173115