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.

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

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.

Tooltip Scripts

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.

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

 

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.

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

Balloon Tooltip
A tooltip with a speech bubble background.

Tooltip Scripts

Pure CSS Tooltips
Tooltip effects using only CSS and HTML.

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

MooTools Tooltips
Tooltips using the MooTools framework.

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

HelpBalloon
AJAX help balloons / tool tips / dialog balloons.

Tooltip Scripts

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.

Tooltip Scripts

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?

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

EZPZ Tooltip
A basic tooltip that offers some advanced options.

Tooltip Scripts

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

Tooltip Scripts

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

Tooltip Scripts

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.

Tooltip Scripts

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

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.

Tooltip Scripts

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

Tooltip Scripts

For more web development resources please see:

Published December 2nd, 2009 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

44 Responses

Comments are now closed on this post.

  • Waheed Akhtar, December 2, 2009

    Great tooltips. Thanks for sharing

  • designfollow, December 2, 2009

    thank for this great tooltips scripts.

    very useful.

  • Boston bankruptcy attorney, December 2, 2009

    Awesome. Thanks a lot.

  • dkdenz, December 2, 2009

    Great list, but you forgot someone: http://walterzorn.de/tooltip/tooltip.htm

  • Tricia, December 2, 2009

    Thanks, great list! There is also BeautyTips (http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html)

  • Dzinepress, December 3, 2009

    really informative tool tip scripts.

  • Lea, December 3, 2009

    Great tooltips! :D

  • Singapore website design, December 3, 2009

    Greetings from Singapore ! Thanks for the nice tips. really helps.

  • GBloggt, December 3, 2009

    Thanks for this wonderful roundup of tooltip scripts.

  • Chacaal, December 3, 2009

    thank you nice post :)))

  • Orlando Web Design, December 3, 2009

    Amazing list (as always) of tooltip resources!

    Thanks for sharing and taking the time.

  • Webanddesigners, December 3, 2009

    Gr8 lists. But bit of work to make it workable in wordpress.

  • Carmen, December 4, 2009

    These are so much better than the default tooltips.

  • Nikolaos Dimopoulos, December 5, 2009

    Great post!

    Thank you for sharing!

  • New Art, December 6, 2009

    I really love this post. What I like is Advanced Tooltip, it makes demonstrates how we use Taggify widget to enhance your blog with nice functionality showing popup. Look profesional, I want use in my blog. Thanks!!

  • Cameron Sweeney, December 7, 2009

    I’ll have to check these out! Perfect timing! Cheers.

  • Space and Time, December 7, 2009

    I prefer the mootools tooltip, but then I love everything mootools.

  • The Brisbane Line, December 7, 2009

    These look really handy. I’m currently re-designing my site so will see how I can incorporate some of this functionality.

  • böcek ilaçlama, December 8, 2009

    thanx for tool tips i used my web sites hot ajax

  • Ole Bülow, December 8, 2009

    There is also another great Coda-like tooltip called Bubbletip! http://www.uhleeka.com/blog/2009/11/bubbletip/

    the nice thing with Bubbletip! is that you can have several tooltips on one page, where many of the other coda-likes only support 1 tooltip per page..

  • Mark Carter, December 9, 2009

    Fantastic collection. I’ve been using qTip lately, which is pretty cool. Seems like quite a few here are worth checking out. Thanks for sharing them.

  • Keith, December 12, 2009

    just started a new site yesterday, these can and will be very helpful, thanks!

  • Levent, December 21, 2009

    Thanks @Ole Bülow And also vandelaydesign.com

  • Singapore Web Design, January 4, 2010

    Great list as always! Have changed your web site to my homepage now.

  • nikhil, January 28, 2010

    nice collection of tooltips, thankx for sharing it….

  • Intekhab A Rizvi, February 1, 2010

    Check out this very simple tooltip also, it can show you content from another file as well as us id tag to save link data, it also support images so that you can also show images on you tooltip, and it moves with mouse pointer.

    http://intekhabrizvi.wordpress.com/2010/01/21/jquery-very-simple-tooltip-plugin-ajax-enabled-2/

  • fb, March 29, 2010

    Cool list, I use qtip, mainly like the way it works well with fancybox.

  • Giulianna, May 27, 2010

    Thanks! Great tools.

    I also suggest Likno’s Web Tooltips Builder.

    Quite easy to use for making jquery popup tooltips for sites.

    You can check them out at:
    http://www.likno.com/jquery-tooltips/index.php

  • Paul, March 5, 2012

    Nice tooltips scripts! Thanks.