Collection of Free ToolTips using AJAX, JavaScript & CSS

Posted on May 28, 2009, under AJAX, HTML & CSS, JavaScript, jQuery 

A tooltip is a short and informative text that appears in a box that pops out when you hover the mouse cursor over an element (link, button, div etc.).

1. DHTML JavaScript Tool Tips is a JavaScript Cross Browser library to create tool tips (information pop-up boxes). This script can be customized in multiple ways and may contain plain-text as well as HTML (images, line breaks).

dhtml-javascript-tool-tips

* Implementation
1. Download the JS File: wz_tooltip.js.
2. Include the library in your HTML page by inserting the following line in the BODY section of your page (it can be added after the last tag containing a tool tip):

<script language="JavaScript" type="text/javascript" src="http://www.your-domain-name.com/path/to/wz_tooltip.js"></script>

3. Each of the tags requires only the onMouseOver attribute (onMouseOut is not required):

<a href="photos.htm" onmouseover="return escape('Your text here')">Photos</a>

* Browsers Compatibility: Netscape 4 and 6+, Mozilla, Galeon, Opera 5, 6 and 7+, MSIE 4, 5+, Konqueror 3

2. Fading JavaScript Tooltips 2kb is an animated JS tool tip script that is very easy to use and lightweight. To see how the script is implemented check the index.html file from the ZIP archive.

fading-javascript-tooltips

Tested in: IE6+, FireFox, Opera, Safari

To see a walk-through of the code and the logic check this post.

3. Vertigo Project: vTip – A script designed to quickly provide very lightweight tooltips to users of JQuery.

vtip

* Implementation

<a href="http://www.vertigo-project.com" title="This is tooltip." class="vtip">Link Tooltip</a>
<img src="http://www.website.com/image.png" title="ToolTip on an image!" class="vtip" />
<div class="vtip" title="A tooltip that shows for the whole div!">
This div has a ToolTip.
</div>

Read more…

4. jTip – A jQuery Tool Tip – Pulls data from the server using a hidden HTTP Request (HttpXMLRequest object). It’s customizable by providing user defined widths (defaults to 250px wide) via a URL Query String. The height is liquid and stretches to match the content that fills the tool tip.

jtip

Read more…

5. Simpletip – A simple jQuery tooltip plugin that allows you to easily create tooltips on any element on the page using the jQuery’s selectors and event management. The tooltip can be: static, dynamic & loaded through AJAX with a variety of different visual effects: fade, slide.

simpletip

Read more…

6. BeautyTips is a jQuery ToolTip Plugin that creates rollover balloon-help style tooltips for any element on the page. The script calculates the best position for each tooltip bubble and then draws it. Bubbles can have rounded corners with a variable corner radius, “spike” length, color, opacity, and much more.

beautytips

Read more…

7. Cross-browser JavaScript tooltip – Displays ToolTips containing HTML markup. It works in all major browsers.

cross-browser-javascript-tooltip

Read more…

8. SkinnyTip is a free JavaScript Popup Tooltip Library that is easy to install and configure. It’s very small, having under 10kb in size. It supports the latest versions of IE, Firefox, and Netscape.

skinnytip

Read more…

9. Dyn-web’s 2008 ToolTip is an unobtrusive and easy to setup script. The code offers a variety of options for source and tooltip content and flexible control of positioning, formatting and display. The tooltip content can be held in a variable, obtained via AJAX, or it can come from HTML elements in the page.

javascript-tooltips-dyn-web

Read more…

10. OverLIB is a JavaScript library that can be used on websites to provide the user with information about what will happen when they click on a link as well as navigational help.

overlib

Quick feature list:

  • Background picture with transparency
  • Making the popup go above the cursor to the left with snap!
  • Taking full control over the html
  • Different fonts and colors
  • Html in the popup

Read more…

11. CSS Bubble Tooltips is a nice and easy customizable non-javascript ToolTip.

css-bubble-tooltips

Read more…

12. Easy CSS ToolTip is a very simple cross-browser tooltip that has less then 1KB (a few lines of code), being easy to integrate on your website.

easy-css-tooltip

Read more…

13. Pure CSS Tooltips

Most tooltips are created with the help of javascript or some other programming languages. This can be cumbersome because not everyone wants to learn Javascript. But CSS tooltips are easy to create and can be loaded quickly without any delay.

pure-css-tooltips

Read more…

14. Easiest Tooltip and Image Preview Using jQuery from CSS Globe

What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

easy-tooltip-using-jquery

Read more…

Comment via Facebook

comments

One Reply to "Collection of Free ToolTips using AJAX, JavaScript & CSS"

  1. very nice share, i was struggling to find decent tooltips scripts but im sure one of these will work fine! thank you

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.