show text when mouse over a link

[hassank1]

I want when a user just hoover a specific link a small box to appear to show info about the specific link

how can I do that?

[TLawrence]

The easiest way for me to accomplish this is using CSS. 

 

What have you tried so far?  Any code to look at?

[RichardRotterdam]

try looking up the word "tooltip"

 

I like the ones for jQuery and Mootools. but there are  seriously TONS of tooltip scripts out there

[eddie21leeds]

this may help - see image map with added javascript.

 

http://www.w3schools.com/js/js_image_maps.asp

[TLawrence]

Here's the CSS I use...

a.popup {
	position:relative;
	z-index:24;
	color:#000000;
	text-decoration:none;
}
a.popup:hover {z-index:25; background-color:#FFCCD8 }
a.popup span {display:none; }
a.popup:hover span {
	display:block;
	position:absolute;
	top:35px; left:15px;
	width:200px;
	padding:3px;
	border:1px solid #000000;
	background-color:#FFCCCF; color:#000;
}

 

And here's how to use it in your code...

<a class='popup' href='http://thelink'>LINK<span>Put the description here.</span></a>

 

 

This allows you to add a description for any link which pops up when you roll over the link.  You can customize the colors, etc.  This is just an example from actual code I used in a project.

[haku]

Or if you want something really easy:

 

<a href="#" title="this is the text that will pop up">Link</a>