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

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 thi开发者_Python百科s? Is it using jQuery or MooTools or what?

Thanks from this beginnig web designer!

I think you can do it with CSS, no need for Javascript.

The black box (the tooltip) can be an absolutely positioned child with display: none by default, and on :hover you can show it.

Here is a little demo.

Example CSS:

.tooltipped { position: relative; }
.tooltip { display: none; position: absolute; width: 100%; left: 0; top: 35px; }
.tooltipped:hover .tooltip { display: block; }

for the HTML (which remains readable without CSS!):

<div class="tooltipped">3 <span class="tooltip">acorns remaining</span></div>​

This method will work in every modern browser and IE >= 7. IE6 only supports the :hover selector on links, so you need to use an a element if you want to support it (or find a different workaround).

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.

Definitely looks like Tipsy, a jQuery plugin I used.

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();
  });
});