Hot on the heels of ThickBox comes jTip, a jQuery tool tip solution. Of course, a tool tip type solution is anything but monumental; you don’t have to tell me that. Regardless, given my keen liking for the great jQuery library, along with a legitimate need to provide one last solution before I left Albertson’s, I have conjured up a tool tip solution using jQuery. So yup, it’s just another tool tip, but maybe with a little more flexibility/customization than what you might currently be use to with similar solutions.

jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It’s nothing that fancy, really, just your normal everyday over hyped AJAX/AXAH type stuff. In keeping with all of this web 2.0 silliness, this means all of the tips are external. This is a handy feature depending upon the type of usage a person might intend for jTip. Originally, I built jTip to be used on a web application UI that requires the explanation of several redundant form fields in multiple web applications with similar functionality. For example, as showcased in my example, a user can roll-over a question mark (?) and get a detailed explanation of the password’s requirements. A single file can be used to keep these requirements consistent across an application as well as all applications that may require a password. Of course, the same thing could be done with a single HTML file and a pop-up window, but then it wouldn’t be web 2.0 certified, would it? Seriously though, this solution could easily be used with a database instead of a static htm file. For instance the file I link to could contain php that would connect to a database for the tool tip text. And yes, that would make more sense then the example I am showing here. Unless of course using a database to store and update information is not an option.

Ok, so all you really want to know is, exactly what does jTip do. At this point you can simply check out the demo, or read my quick and dirty definition of jTip below.

What does jTip do:

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. Also jTip can be customized 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. Additionally it’s possible to provide a link (via url query string) to a jTip tool tip link element (a href) so that the link will still function as expected by the user. See the Yahoo link in the demo for a working example.

Demo: http://www.codylindley.com/blogstuff/js/jtip/
Download: http://www.codylindley.com/blogstuff/js/jtip/jTip.zip
Source: http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip

Related Listings:

1. jQuery Plugin: betterTip BetterTip is a plugin for the JQuery library that allows...
2. IxEdit – JavaScript based interaction design tool IxEdit is a JavaScript-based interaction design tool for the web....
3. Fleegix.js Java Tool Fleegix.js provides an extremely lightweight, cross-browser set of JavaScript...
4. PHP and jQuery based 5-star Ajax Rating Script ColorRating requires no database setup or administration as it comes...
5. uploadify – A file upload plugin using jQuery This plugin allows you to change any element with an...

Do you like this post?

Email: