News

Tooltips Scripts: 50+ Scripts With AJAX, Javascripts, CSS & Tutorials

Tooltip, together with a user mouse-pointing (or clicking) action provides more information about a particular section, keyword, paragraph or any web element. Tooltips are fundamentally build-in into HTML. You can achieve basic tooltip just by using TITLE="", ALT="" or even the <ACRONYM> HTML tag. However displaying tooltips for our readers can be more fun, interesting and interactive by taking advantage of Javascripts, CSS, Ajax with HTML.

Here’s more than 50 Tooltips Scripts you can implement for websites, organized in categories of CSS, Javascripts, Javascript Frameworks, couple of tutorials to build tooltips from scratch as well as plugins for blogs. Full list after jump.

DHTML, CSS/Javascripts

• Bubble Tooltips | Demo
• Walterzorn’s JavaScript, DHTML Tooltips | DemoAn easy to use cross-browser Tooltip JavaScript Library that creates tooltips, information popup boxes.

  

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

  

• Popup BalloonDemonstration of balloon.js, written by Sheldon McKay.

  

• SuperNote | DemoSuperNotes are like regular footnotes turbocharged with JavaScript, so they display as tooltips in modern browsers, and remain accessible elsewhere.

  

• qTip | Demo
• dhtmlgoodies Ajax tooltipsdhtmlgoodies has couple of nice tooltips like Tooltip for forms, Ajax tooltip, Tooltip with transparent shadow, etc.

  

• Tipster v3.1 | DemoHighly customisable Javascript tooltip.

  

• Nice Title (revised) | DemoModified version. Check out original Nice Title tooltip here.

  

• Mobile Tooltip Widget for GWT(Google Web Toolkit) | Demo
• JavaScript Fading TooltipsImproved tooltip effect, lighter codes with titles get cut of at maximum of 25 characters.

  

• Slider DataPager with Dynamic Tooltips | DemoNot only users are shown the typical paging statistics, but now they can get an idea of what data can be found on the page before actually navigating to it.

  

• apycom Popup Tooltip | DemoMulti-layer tooltip.

  

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

  

• Good-Looking Tooltips (GLT)GLT is short for Good-Looking Tooltips and it is a small JavaScript library that you can include to spice up the look of your tooltips in your web page.

  

• Cool DHTML Tooltip II | DemoAlso check out Cool DHTML Tooltip I.

  

• Form field hints with CSS/Javascript | DemoAs you tab through each input field, some helper text appears in box out to the right.

  

CSS

• Lixlpixel CSS tooltips
• CSS Tooltips
• Unobtrusive and Slightly Accessible CSS Tool Tips
• Pure CSS Tooltips
• CSS Tooltips – Floating HTML ElementsThis article shows how to create these tooltips with only CSS.

  

• CSS Bubble Tooltips
• CSS Rollovers for tooltip

jQuery

• jQuery Tooltip | Demo
• clueTip | DemoThe clueTip plug-in allows you to easily set a link to show a “tooltip” of sorts when the user’s mouse hovers over the link. If the link includes a title attribute, its text becomes the heading of the clueTip. Here’s another cover up on clueTip.

  

• Coda Popup Bubbles | DemoOne of the slickest tooltip we’ve seen so far.

  

• jTip | Demo
• Better TipBetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip, but it is much more flexible.

  

• jHelperTip 1.0 | DemojHelperTip is intended to be useful in many situations such as hovering tip and clickable tips. It can get data from a container, through Ajax or even the attributes of the current object.

  

• jQuery InputHintBox

MooTools

• Moo Tools Tips | Demo
• e-magine Tooltips | DemoWorks like the original Moo Tool tooltip, with the possibility to grab contents from a DOM node.

  

Prototype

• HelpBalloon.js | DemoSimple help balloon tooltip with a close button.

  

• Protip 2Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. Also check out Protip.

  

Script.aculo.us

• Tooltip.jsTooltip.js is a simple library that builds on top of Prototype and Script.aculo.us.

  

• CoolTip | DemoLightweight unobtrusive JavaScript web-browser tooltips replacement technique.

  

Yahoo! User Interface (YUI)

• Sweet Titles | DemoThis is a YUI style of Sweet Titles which has more flexibility in customization and allows for {n} number of initialized sets.

  

Web Services

• Websnapr Preview Bubble | demoThe websnapr Preview Bubble is a simple, unobtrusive script used to display an overlay bubble showing a hyperlink target thumbnail using websnapr. It’s a snap to setup and works on (almost) all modern browsers.

  

• Snap shotPut Snap Shots on your site to upgrade your user experience

  

• TaggifyTaggify is a web widget which allows bloggers and publishers enhance their sites by adding visual tags to any site’s images.

  

Tutorials and Other Resources

If embedding a ready-made tooltip is not your cup of tea, here’s some tutorials that teach you to build tooltip from scratch.

• Create a Nice, Lightweight JavaScript Tooltip [Javascript] | DemoCreate a lightweight script that fades a tooltip with rounded corners in relation to the cursor position.

  

• Customize Your Tips [Moo Tools]
• Create a Simple, Powerful Product Highlighter with MooTools [Moo Tools] | Demo
• Create Multiline Tooltip [CSS/Javascript]This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.

  

• Bubble Tooltips [Wordpress Plugin]This plugin makes easy to use nice tooltips for your blog. You can change for two toolips.

  

• Tippy WordPress Plugin [Wordpress Plugin]Tippy is a friendly little WordPress plugin that gives you a way to include highly configurable tooltips in your WordPress site.

  

Tooltip, together with a user mouse-pointing (or clicking) action provides more information about a particular section, keyword, paragraph or any web element. Tooltips are fundamentally build-in into HTML. You can achieve basic tooltip just by using TITLE="", ALT="" or even the <ACRONYM> HTML tag. However displaying tooltips for our readers can be more fun, interesting and interactive by taking advantage of Javascripts, CSS, Ajax with HTML.

Here’s more than 50 Tooltips Scripts you can implement for websites, organized in categories of CSS, Javascripts, Javascript Frameworks, couple of tutorials to build tooltips from scratch as well as plugins for blogs. Full list after jump.

DHTML, CSS/Javascripts

• Bubble Tooltips | Demo
• Walterzorn’s JavaScript, DHTML Tooltips | DemoAn easy to use cross-browser Tooltip JavaScript Library that creates tooltips, information popup boxes.

  

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

  

• Popup BalloonDemonstration of balloon.js, written by Sheldon McKay.

  

• SuperNote | DemoSuperNotes are like regular footnotes turbocharged with JavaScript, so they display as tooltips in modern browsers, and remain accessible elsewhere.

  

• qTip | Demo
• dhtmlgoodies Ajax tooltipsdhtmlgoodies has couple of nice tooltips like Tooltip for forms, Ajax tooltip, Tooltip with transparent shadow, etc.

  

• Tipster v3.1 | DemoHighly customisable Javascript tooltip.

  

• Nice Title (revised) | DemoModified version. Check out original Nice Title tooltip here.

  

• Mobile Tooltip Widget for GWT(Google Web Toolkit) | Demo
• JavaScript Fading TooltipsImproved tooltip effect, lighter codes with titles get cut of at maximum of 25 characters.

  

• Slider DataPager with Dynamic Tooltips | DemoNot only users are shown the typical paging statistics, but now they can get an idea of what data can be found on the page before actually navigating to it.

  

• apycom Popup Tooltip | DemoMulti-layer tooltip.

  

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

  

• Good-Looking Tooltips (GLT)GLT is short for Good-Looking Tooltips and it is a small JavaScript library that you can include to spice up the look of your tooltips in your web page.

  

• Cool DHTML Tooltip II | DemoAlso check out Cool DHTML Tooltip I.

  

• Form field hints with CSS/Javascript | DemoAs you tab through each input field, some helper text appears in box out to the right.

  

CSS

• Lixlpixel CSS tooltips
• CSS Tooltips
• Unobtrusive and Slightly Accessible CSS Tool Tips
• Pure CSS Tooltips
• CSS Tooltips – Floating HTML ElementsThis article shows how to create these tooltips with only CSS.

  

• CSS Bubble Tooltips
• CSS Rollovers for tooltip

jQuery

• jQuery Tooltip | Demo
• clueTip | DemoThe clueTip plug-in allows you to easily set a link to show a “tooltip” of sorts when the user’s mouse hovers over the link. If the link includes a title attribute, its text becomes the heading of the clueTip. Here’s another cover up on clueTip.

  

• Coda Popup Bubbles | DemoOne of the slickest tooltip we’ve seen so far.

  

• jTip | Demo
• Better TipBetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip, but it is much more flexible.

  

• jHelperTip 1.0 | DemojHelperTip is intended to be useful in many situations such as hovering tip and clickable tips. It can get data from a container, through Ajax or even the attributes of the current object.

  

• jQuery InputHintBox

MooTools

• Moo Tools Tips | Demo
• e-magine Tooltips | DemoWorks like the original Moo Tool tooltip, with the possibility to grab contents from a DOM node.

  

Prototype

• HelpBalloon.js | DemoSimple help balloon tooltip with a close button.

  

• Protip 2Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. Also check out Protip.

  

Script.aculo.us

• Tooltip.jsTooltip.js is a simple library that builds on top of Prototype and Script.aculo.us.

  

• CoolTip | DemoLightweight unobtrusive JavaScript web-browser tooltips replacement technique.

  

Yahoo! User Interface (YUI)

• Sweet Titles | DemoThis is a YUI style of Sweet Titles which has more flexibility in customization and allows for {n} number of initialized sets.

  

Web Services

• Websnapr Preview Bubble | demoThe websnapr Preview Bubble is a simple, unobtrusive script used to display an overlay bubble showing a hyperlink target thumbnail using websnapr. It’s a snap to setup and works on (almost) all modern browsers.

  

• Snap shotPut Snap Shots on your site to upgrade your user experience

  

• TaggifyTaggify is a web widget which allows bloggers and publishers enhance their sites by adding visual tags to any site’s images.

  

Tutorials and Other Resources

If embedding a ready-made tooltip is not your cup of tea, here’s some tutorials that teach you to build tooltip from scratch.

• Create a Nice, Lightweight JavaScript Tooltip [Javascript] | DemoCreate a lightweight script that fades a tooltip with rounded corners in relation to the cursor position.

  

• Customize Your Tips [Moo Tools]
• Create a Simple, Powerful Product Highlighter with MooTools [Moo Tools] | Demo
• Create Multiline Tooltip [CSS/Javascript]This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.

  

• Bubble Tooltips [Wordpress Plugin]This plugin makes easy to use nice tooltips for your blog. You can change for two toolips.

  

• Tippy WordPress Plugin [Wordpress Plugin]Tippy is a friendly little WordPress plugin that gives you a way to include highly configurable tooltips in your WordPress site.

  

Technorati Tags: ajax tooltip, cross browser, css, dynamic tooltips, footnotes, google web, html document, javascript dhtml, javascripts, web element, web service, website implementation