Useful jQuery Tooltip Plugins That You Could Use On Your Web Projects

The other week a client asked me to make a div appear when hovering a link so I thought immediately at a jQuery tooltip. Sure, getting one that was appropriate to my needs was a little bit difficult and I found myself searching through a lot of them. At the end of the day I had a serious list of jQuery tooltips that I could download and even tutorials about how to create some hover effects that popular sites are using. I’m sharing this list with you and hope it will be as useful for you as it was for me.

qTip2

The second generation of the advanced qTip plugin for the ever popular jQuery framework.

Building on 1.0′s user friendly, yet feature rich base, qTip2 provides you with tonnes of features like speech bubble tips and imagemap support, and best of all… it’s completely free under the MIT/GPLv2 licenses!

Prototip 2

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.

Style: Easy to customize.
Position: Complete control over tooltip positions.
Round: Configurable rounded corners, no PNG images required.
Speech bubble effect!
Works on all modern browsers.

Coda Popup Bubbles

Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design.

jQuery Ajax Tooltip

Our application is very person centric, so we wanted an easy way to pop up a “tooltip” with more information about a person whenever you see a person’s name. For example, here are some search results. When you hover over a name, more information appears.

jQuery Tools – Tooltip

Tooltip helps you to build easier user interfaces. Big or small. Pluggable effects. Yet another crucial tool.

SimpleTip

Simpletip is a plugin for the popular jQuery JavaScript library. It allows you to create tooltips with ease on any element on the page using the power of jQuery’s selectors and event management. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.

jGrowl

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

jQuery plugin: Tooltip

jQuery (mb)Tooltip 1.6

Create a Digg-style post sharing tool with jQuery

vTip

vTip is designed to quickly provide very lightweight (706b js, 272b CSS, 270b image) tooltips to users of jQuery. The zip includes everything you need (including an example page), as well as jQuery for the examples to work.

JavaScript DHTML Tooltips

Presenting dyn-web’s JavaScript DHTML Tooltips with unobtrusive event handling and easy setup. The code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display. The JavaScript is object based, avoids the use of global variables and provides accessibility and device independent features.

Create a Simple CSS + Javascript Tooltip with jQuery

BsTip

jQuery plugin EZPZ Tooltip

There are a ton of tooltip plugins for jQuery out there, but I couldn’t find one that works with the way I think. To me, it’s a simple concept: You hover over a target element, then some content shows up. It should be flexible enough to customize the look and feel without requiring the bloat of any CSS or images. Hover targets should be mapped to their content counterparts by convention. I think I’ve built just that with the EZPZ Tooltip.

JTip

HelpBalloon.js 2.0.1

SuperNote

This is an XHTML/CSS/JavaScript powered popup tooltip system with a strong focus on accessibility. Popup notes are stored as “footnotes” in a document and dynamically converted to tooltips!

Build a Better Tooltip with jQuery Awesomeness

One of the great tools we have in our web development goodie-bag are tooltips. A tooltip is a box that appears when you hover your cursor over an element like a hyperlink. It provides supplementary information about that element. For example, a link with little or no text (an icon) may become confusing. Provide an extra sentence or two within a tooltip to explain to your users what will happen if they click on it.

Rich HTML Balloon Tooltip

This is a balloon style tooltip that can be applied to any link(s) on the page. What sets it apart is where it gets the tooltip messages- from ordinary DIV elements on the page containing the desired tooltip content. This fact means you can easily define tooltips with rich HTML and images inside them. In other words, any content can now easily become a tooltip message, whether you’re manually defining the tooltips, or dynamically generating them using server side languages.

The tooltip supports an optional arrow image that like the tooltip itself, dynamically adjusts itself if it’s too close to any four corners of the browser window.

Cut & Paste Inline HTML Tooltip script

Inline HTML Tooltip lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window’s edges.

jqTooltip

Tipsy

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

Pop!

Enjoy simple dropdown menus with pop!, an unobtrusive javascript plugin for jquery.

clueTip

The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

BeautyTips

BeautyTips is a simple-to-use balloon-help style tootip plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event. These balloons are drawn dynamically using the canvas HTML 5 element, and options include corner radius, spike length and width, stroke width. The balloons can auto-position based on the most available area in the current display window or they can be positioned according to an array of preferences (just left or right for instance).

Bottom slide tooltip

This bottom slide-in box can be used as an “aid” or “tooltip” for your page elements. Move your mouse over the element in question (must support the onMouseover event, such as < A > tag), and a description will slide in from the bottom of the browser.

Easy Tooltip – jQuery plugin

By default this plugin will read the title attribute of the element and convert it into fade-in tooltip that you can style any way you want. Important note, it doesn’t have to be an anchor tag. You can apply this script to any element(s) you want.
The one big thing that makes this different from my first version is that you are now allowed to put custom content, any html content you want – images, long paragraphs, link lists… anything. If you hate writing HTML code inside a JavaScript variable, this plugin allows you to use inner HTML from any element on the page. It means that you can write HTML directly on the page, as you normally do, hide that element with CSS and have it appear as a tooltip on mouse over. Take a look at the demos for more info.