JQuery: Creating boxed text that shows on top of a div on hover

Question

Let's say that I have a div that is called mainDiv, and it contains a <p> element with some text inside. I want to create another element (a <p> or a <div> or something else maybe?) inside the same div that is displayed when you hover over the first <p> element, and is hidden soon after you move your mouse away from the first element. Preferably, the text in the second element is enclosed in a black box, or something resembling Facebook photo page captions, for example.

How can this be done? I'm thinking adding a toggle function to the hover event, but I'm not sure how exactly to do this, as I'm very new to JQuery. Also, could you provide some CSS for creating a box (possibly semi-transparent, maybe with an opacity of 60% or so?) for the element that is shown upon hover? Also, if this can be done with toggle(), can toggle() be used together with a speed of animation, such as slow or fast (as in show(slow) )?

Also, I'm thinking that a high z-order is essential to this goal, but I'm not sure whether the box will be displayed directly above, and not to the side, or something like that.

Answer 1

Not really a direct hack, but if I was burdened with that task I would take a look at jQuery Tooltip from the TOOLS library. The source code should give you some idea of how to implement that effectively, or you could just save yourself some time and use it (or a similar library) instead.

Answer 2

Sliding Captions in jQuery

There is a really nice tutorial about creating nice image semi-transparent sliding captions with jquery.

Have a look at Demonstration of Sliding Captions

and the tutorial itself is located at: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/