Making Popup captions?!

Discussion in 'Web Design and Development' started by Simplesimon101, Jan 9, 2010.

  1. Simplesimon101 macrumors regular

    Oct 5, 2006
    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 - 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,


    Attached Files:

  2. angelwatt Moderator emeritus


    Aug 16, 2005
    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. Using the keyword "tooltip" will be of help tracking done other solutions.
  3. Simplesimon101 thread starter macrumors regular

    Oct 5, 2006

    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.
  4. katy macrumors member

    Jun 19, 2006

Share This Page