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

I've never coded my own, but I've used this one before, from flowplayer.org. There's a lot of settings and configurations.

Answer 2

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:

Answer 3

Checkout Prototip especially the hideafter mode in the demo which satisfies your requirements.

There are lots of other ones you can chose from here

Answer 4

Take a look at qTip

Answer 5

Reommendation:

Use one of the following jQuery plugins:

• qTip (see above)
• clueTip: http://plugins.learningjquery.com/cluetip/
• jQueryTools: http://flowplayer.org/tools/index.html

(basically pick your poison of which plugin you want) Any of the above should handle your requirements but look and compare the feature sets as to which one fits your current and possibly future needs the best.

If touch devices are a concern, either (a) use onclick instead of onmouseover with some visual call to action or (b) handle browser detection and create alternate behavior for touch devices.

As always, use CSS for all your styling and image needs. Define classes in your Javascript that trigger look and feel but please don't inject in-line styles.

Answer 6

You have a couple of cool off-mainstream options that you'd like to explore in order to learn more.

Having accessibility and SEO in mind, let's start: make your tooltips in plain HTML and use CSS/Javascript to display them as needed in your requirements.

If you wanna some new, cool and fresh features, you can use CSS3 transitions to display/hide on mouse over/out. It plays nice on Safari, and other new browsers (safari mobile, opera mobile, included).

But for even FF 3.x this CSS3 solution doesn't work, unfortunately.

This let us with some javascript/jquery coding.

Actually, your request resembles me to another very cool stuff: mega dropdown menus.

I've read first about them at Jakob Nielsen's Alert Box: http://www.useit.com/alertbox/mega-dropdown-menus.html

You can find a how-to about them at sitepoint.com: http://blogs.sitepoint.com/2009/03/31/make-a-mega-drop-down-menu-with-jquery/

Well, thing is make a lightweight accessible option with raw HTML and CSS3, and then enhance it with javascript/jquery. You can go further as said and make even some tuning for accessibility on Safari/Android mobile devices (well, safari would work with just css3 solution, so it will depends more on your needs than technology infrastructure available).