tooltip popup over fixed div

is this possible?

[sned]

I have a fixed menu type <div> on the right hand side of my page. In the main content area, certain words are highlighted with "tooltips" that popup when you mouseover. If they are close enough to the right hand side of the page, the tooltips appear underneath the menu div. Is there anyway that they can always appear on top? I've tried z-index on both the tooltip and the divs, but didn't seem to work.

[ArrTu]

Since I can't see the code, I can only make a suggestion for you to try:

im assuming the tooltip is javascript. In the instance that the tooltip is called up on hovering the mouse over a certain piece of text (which is obviously an anchor tag) in the A href tag, just before the closing ">" you could try putting in style="float:left;position:absolute" (quotation marks included) assuming that your tooltip is spilling out right, if it is spilling left, then you could instead try style="float:right;position:absolute".

[SuzyUK]

sned, when you say you've tried z-index.. is there any positioning set on the main content div.. (default is static) if you haven't got anything set try setting it to position: relative then try z-index's again..

if that doesn't work can you post a small sample of your code thanks..

ArrTu.. float and position: absolute don't go together ;) they are contradictory in nature.. see Positioning the Float [w3.org] for more details..

Suzy

[ArrTu]

Like I said in my first post, I just found out the use of css as opposed to tables, if you say they don't go, then I believe you, but on a page I have just used it on for the first time....I found using FLOAT positioned the item...inclusion of position:absolute made the float element move in front of or behind another element and by using the margins I could determine page position. If it is some sort of error that no-one has heard of before then fair enough, all I can say is that is how works for me.

[SuzyUK]

Hi ArrTu..

I didn't want to "hijack" sned's thread by getting more indepth about positioning here until s/he confirms more details .. but by way of an apology, (on re-reading my message I realise I may have been too short in my reply..)

I'm glad you've discovered CSS (warning: it's very addictive :)), but CSS-P (positioning) is a bit different, and understanding, what relative, absolute, static and float do and then how they interact with each other is a matter of trial and error sometimes. If it works for you then thats the main thing ;)

However you may find that rules that don't conform to the spec/recommendation will have varying degrees of success across different operating platforms/browsers. IE is generally very forgiving in nature to things it doesn't understand, whereas Moz (NN) is very strict.

You can use

position: relative;

with float and this would then enable it to remain a floating element and you to use z-index on it.

However if sned's "highlighted words" are just <a> links embedded in a body of text, (the tooltip could be a CSS pop-up div ~ non-floating, or it could be the default tooltip that using the title attribute gives, or it could be javascript..) possibly

position:relative;

could be added to the "tooltip's" div CSS code or setting the whole of the main content div to

position:relative;

and giving it a higher z-index than the right menu may be solutions..

Hope that helps clarify/make amends
Suzy

[sned]

Sorry about not replying with code and such sooner, but thanks for the replies .. here's some of the code I have.

The popups are coded like this:

<a class="info" href="#">Link Word Here <span>Definition of Linked word goes here.</span></a>

The CSS:
a.info{
position:relative;
z-index:24;}

a.info:hover{z-index:25;}

a.info span{display: none}

a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
z-index:25;
}

The menu I'm trying to get this to show over is just
<div style="position:fixed; z-index:1">

Maybe <span> and <div> do z-index differently. Time to fool around some more.

Thanks for your input.
-sned

[MatthewHSE]

Something I often do is just use the title attribute. This gives a little "tooltip" just like the tooltips that show up over Windows toolbar buttons, etc. Take this for instance:

<a href="contact.html" title="Contact us!">Contact</a>

Hovering over that link for a second would pop up a little tooltip saying "Contact us!" I like this method because it seems to be cross-browser, doesn't require JavaScript, may count as relevant text for search engines, is easy to do, and provides a short delay before the tooltip shows. I personally find it very irritating to visit a page where everywhere I point flies something up in my face . . . ;)

I don't know if this addresses your needs or not, but I thought it was worth mentioning.

[sned]

Thanks for that example MatthewHSE, I do use that type of tooltip in a couple cases. I ended up just taking the position:fixed off the right hand menu anyway, so everything shows up fine now. Thanks again for all the help.

-sned

<edit>
I have to admit though, that I didn't think of the title for this purpose so I went and tried it. Turns out that the title doesn't give enough room for what I need, it truncates after a few characters into "text ..." . Oh well.
</edit>