Making Popup captions?!

[Simplesimon101]

Hi All,

I have a question. I've know XHTML & CSS and I've recently just started learning Javascript. I've been building a website but I really want to know how to make a pop up captions that appear when you hover your mouse over links. An example is the Radio Times Website (http://www.radiotimes.com/ListingsServlet?event=13&broadcastType=1&jspGridLocation=/jsp/tv_listings_grid.jsp&jspListLocation=/jsp/tv_listings_single.jsp&jspError=/jsp/error.jsp) - has a caption that appears in an orange box when you hover over the program which gives you more information (See attachment).

How would I do this? is it all javascript?

Thanks in advance,

Simon

[angelwatt]

That uses JavaScript for it, but this type of thing can be done purely with CSS depending the exact effect you want and what content is going into it. The CSS method would be the same as a rollover menu, using a:hover type CSS along with using the display property to turn on/off the visibility of the element. The JavaScript method would attach a mouseover event to the item you want the hover effect to apply to, and then the JavaScript can modify the CSS or add new content to the DOM, etc. There's a number of ways to accomplish it via JavaScript really.

I'm not sure if your desire is to learn how to do this, or simply to get it done using pre-built solution. Here's one example of a CSS-based solution (http://loadaveragezero.com/vnav/labs/CSS/tooltips.php). Using the keyword "tooltip" will be of help tracking done other solutions.

[Simplesimon101]

thanks,

yep I used the CSS example and tweaked it for my own use.

I'll probably keep an eye out for the javascript one and tweak it eventually.

Thanks for the help.

[katy]

jquery.com could be something to look at .