Question

i have a simple question.
for a website, i want to create an “info note” that appears by hovering a link, as facebook does when hovering some thumbnails you know?

here is the thing i have for the moment, so you can see the bug i have :

alt text http://img641.imageshack.us/img641/1571/notes.gif
so the only problem is : the small “info note” stay on the left of my div. the goal is that this small note appears well-placed, over the right icon… :/

do javascript is required to do this ? or can we do it with css only (and in this case, what’s wrong with my code? :/)

for information, here is the html code for this :

<a href="#" onmouseover="infohover('show', 'aaa');" onmouseout="infohover('hide', 'aaa');">
    <span class="infohover" id="aaa"><span class="infohover_in">J'aime !</span></span>
    <img src="<?php echo $basedir; ?>images/temp/heart.png" alt="" />
</a>

and the css :

.infohover { display: none; position: relative; float: left; margin-top: -30px; margin-left: -4px; opacity: 0.9; background: url('<?php echo $basedir; ?>images/temp/infohover_arrow.gif') 8px 24px no-repeat; }
.infohover_in { display: block; padding: 6px; margin-bottom: 6px; background-color: #000000; color: #ffffff; border-radius: 3px; }

ps: don’t pay attention to the “not perfect written” code, i write it quickly for the test, to see if i can do it or no… will clean it later 🙂

thanks a lot for your help and ideas ! have a nice day !

Answer 1

No JavaScript is required here.

HTML

<a href="#" class="tooltip">Icon 1<span class="tooltip">Tooltip 1</span></a>
<a href="#" class="tooltip">Icon 2<span class="tooltip">Tooltip 2</span></a>
<a href="#" class="tooltip">Icon 3<span class="tooltip">Tooltip 3</span></a>

CSS

a.tooltip {
    text-decoration: none;
    position: relative;
}
a.tooltip .tooltip {
    position: absolute;
    top: -1.1em;
    left: 0;
    display: none;
    color: black;
    white-space: nowrap;
}
a.tooltip:hover .tooltip {
    display: block;
}  

The magic is in a.tooltip { position: relative; }. Whenever you have an element with position: relative, elements within that element that have position: absolute will position relatively to that parent element. This, plus a little :hover pseudo action makes your problem very easy to solve.

Live demo.