·

30 Useful Scripts for Tooltips

Vandelay Design may receive compensation from companies, products, and services covered on our site. For more details, please refer to our Disclosure page.

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.

Tooltip Scripts

Prototip 2

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

Prototip 2 - Tooltip Scripts

Coda Popup Bubbles

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

Coda Popup Bubbles

Advanced Tooltip

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

Advanced Tooltip

Easiest Tooltip and Image Preview

Adds an element to the body when you roll over a certain object.

Easiest Tooltip and Image Preview

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.

Easy Tooltip jQuery Plugin

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.

jTip

Nice Titles

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

Nice Titles

Tooltip to Forms

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

Tooltip to Forms

Ajax Tooltip

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

Ajax Tooltip

Balloon Tooltip

A tooltip with a speech bubble background.

alloon Tooltip Scripts

Pure CSS Tooltips

Tooltip effects using only CSS and HTML.

Pure CSS Tooltips

JavaScript Tooltips

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

JavaScript Tooltips

Hot Ajax Tooltip

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

Hot Ajax Tooltip

SuperNote

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

SuperNote

MooTools Tooltips

Tooltips using the MooTools framework.

MooTools Tooltips

Tooltip with Transparent Shadow

Tooltip script with a nice transparent shadow.

Tooltip with Transparent Shadow

DHTML JavaScript Tooltips

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

DHTML JavaScript Tooltips

Balloon Tooltips

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

Balloon Tooltips Scripts

HelpBalloon

AJAX help balloons / tool tips / dialog balloons.

HelpBalloon

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.

Form Field Hints

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?

JavaScript Tooltip

CSS Bubble Tooltips

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

CSS Bubble Tooltips

qTip

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

qTip

EZPZ Tooltip

A basic tooltip that offers some advanced options.

EZPZ Tooltip

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).

Query Input Floating Box Hint

Tipsy

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

Tipsy

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.

clueTip Tooltip Scripts

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.

jQuery and CSS Tooltip

Lightweight JavaScript Tooltip

A tutorial from SixRevisions with source code is available for download.

Lightweight JavaScript Tooltip

For more web development resources, please see: