Tooltip as toolbar: jQuery, CSS, or...?

Question

I'd like to use a tooltip as a toolbar and would like some suggestions on the best way to do so.

Here are my requirements:

• Implemented in CSS or jQuery (or both)
• Tooltip shows after a second or two of hovering
• Tooltip has buttons for further UI
• On mouseout, tooltip remains visible for a second
• The tooltip remains visible on mouseover of both the triggering element, and the tooltip itself
• The tooltip can contain HTML

Here's an example of what I'd like to do:

Answer 1

Yes, taylorjes is right. tooltip info/download It's important to note that you are able to include HTML within this tooltip. This means that you can include buttons with click events etc. I have no doubt that you will be able to tweak this per your requirements.

The tooltip image can be custom or else use one of theirs which are very nice.

Here's an example of mine:

in javascript:

$("#toolTipBusinessInfo img[title]").tooltip({ effect: 'slide' });

in html:

<div id="toolTipBusinessInfo" class="pageTitleContainer">
                            <div style="float: left">
                                Business Information</div>
                            <img style="float: left" src="images/question-mark.jpg" alt="?" width="25px" height="25px"
                                title="<p><b>Business Information</b></p>The legal name of the business refers to the name that is reflected on the business license and the name that is used for legal purposes. Legal address reflects the legal address that is used for legal purposes also." />
                        </div>

looks like this: