35 Useful Scripts for Tooltips

Tooltips provide opportunities to give website visitors additional information without creating added clutter on the page. There are plenty of tooltip scripts available that can be used in your own work. In this post we’ll feature 35 options.

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

Coda Popup Bubbles
Re-creates their ‘puff’ popup bubble used by Coda.

Advanced Tooltip
Demonstrates how you can use Taggify widget to enhance your blog with nice functionality showing popup tooltips for people on your photos.

Easiest Tooltip and Image Preview
Adds an element to the body when you roll over a certain object.

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.

jTip
jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.

Nice Titles
Gives links with the title attribute a “nice title” using a semi-transparent PNG.

Tooltip to Forms
Displays a tooltip next to form elements when the element receives focus.

jQuery Tooltips
This tool uses a simple and natural syntax and has an advanced programming API. You can extend it with callback methods or with your own plugins.

Ajax Tooltip
Content of the tooltip is retrieved by Ajax from external files.

Orbital Tooltip
With the Orbital Tooltip you can choose to position the tooltip on any object in a 360 degrees around it.

Balloon Tooltip
A tooltip with a speech bubble background.

Pure CSS Tooltips
Tooltip effects using only CSS and HTML.

JavaScript Tooltips
The code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display.

Hot Ajax Tooltip
Let’s you create mouse over tooltips to your content and allows you to show additional information.

CoolTips
A lightweight unobtrusive JavaScript web-browser tooltips replacement technique.

SuperNote
CSS/JS based “popup tooltip” script that dynamically converts regular footnotes in a document into tooltips that appear next to their triggering elements.

MooTools Tooltips
Tooltips using the MooTools framework.

Websnapr Tooltip
A simple, unobtrusive script used to display an overlay bubble showing a hyperlink target thumbnail using websnapr.

Tooltip with Transparent Shadow
Tooltip script with a nice transparent shadow.

DHTML JavaScript Tooltips
An easy to use cross-browser Tooltip JavaScript Library that creates tooltips.

Balloon Tooltips
Written in object-oriented JavaScript and allows you to add configurable balloon tooltips.

HelpBalloon
AJAX help balloons / tool tips / dialog balloons.

Form Field Hints
Instead of the input hints always showing and potentially cluttering a very simple form, only the hint for the currently focused input will show.

JavaScript Tooltip
Have you ever felt constrained by a lack of control over the browsers default tool tip? Wishing for something a little more customizable?

BoxOver
BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript.

CSS Bubble Tooltips
Avoid cross-browser JavaScript when you can use CSS to make tooltips with less code.

qTip
qTip provides you with tons of features like rounded corners and speech bubble tips.

EZPZ Tooltip
A basic tooltip that offers some advanced options.

jQuery Input Floating Box Hint
Provide an automatic box hint in the right side of an input, when focus on that input, and disappear when focus go (blur).

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

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.

vTip
Designed to quickly provide very lightweight tooltips to users of jQuery.

jQuery and CSS Tooltip
The code to implementing these tooltips is extremely simple and concise, and this allows you to incorporate tooltips into your application without unnecessary bloat and hassle.

Lightweight JavaScript Tooltip
A tutorial from SixRevisions with source code available for download.

For more web development resources please see:

• 37 Shopping Cart Options for Developers
• Style Switchers Showcase and Resources
• 25 jQuery Image Gallery/Slider Tutorials and Plugins
• 14 Options for Managing Membership Websites

Published December 2nd, 2009 by Steven Snell