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. 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):
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
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.
<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>
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.
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.
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.
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.
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
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.
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.
- May 28, 2009
- article by Gabriel C.
- 1 comment