css positioning of an info-note on the top of an icon

Question

Hi all! :-)

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 :

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

Check out YUI Container which can do this. Note the third example which positions the popup dialog to be aligned with an element on the page.

You'll also need to make a custom skin for the container. YUI has an article that tells how.

Also possible to use jquery.

You could roll your own. But usually better/faster to use a library.

Answer 2

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.