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.
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!
- 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 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.
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.
Tooltip helps you to build easier user interfaces. Big or small. Pluggable effects. Yet another crucial tool.
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.
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.
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.
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.
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.
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.
Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.
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 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).
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.
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.