How can I have my links display a little transparent box on a:hover?

Question

I'd like to display a little tooltip similar to this:

That little black box appears when I put my mouse over it. How can I achieve this? Is it using jQuery or MooTools or what?

Thanks from this beginnig web designer!

Answer 1

This is done through JavaScript. I would recommend using the jQuery framework, as there are a load of different jQuery Tool Tip plug-ins ready for you to use.

For example.

Answer 2

I think you can do it with CSS. The black box can be an absolutely positioned child with display: none and on :hover you can show it.

Answer 3

With jQuery, assuming you had a div properly formatted like thus: (notice this is an extremely simple example. I'm not defining the classes to properly format the elements or anything like that)

<a href="AcornsUsage.html" class="acornsremaining">3</a>

and

<div class="onmouseoverpopup parent">
 <div class="onmouesoverpopup arrowontopmiddle"></div>
 <div class="onmouesoverpopup text">Acorns remaining</div>
</div>

You might do something like this

$(document).ready( function() {
  $("acornsremaining").hover( function() {
    $("onmouseoverpopup.parent").show();
  }, function() { 
    $("onmouseoverpopup.parent").hide();
  });
});

Answer 4

Definitely looks like Tipsy, a jQuery plugin I used.