Just The Tip jQuery-flavored Tooltips

Just The Tip is a crassly-named but drop-dead-simple package that provides attractive tooltips for users out of the box. Tooltips created with Just The Tip can contain any valid HTML that you like, and they are fully customizable using CSS. It requires jQuery to function. It is guaranteed to work in Safari 3, 4 (beta), Firefox 3 and 2. IE support is forthcoming, maybe.

The visual look of the tooltips borrows heavily from the ones seen in Panic's awesome web development application, Coda. I use Coda exclusively in web development. Buy it.

Examples

First of all, why don't you just hover over me. I could totally see using this for footnotes1 or defs. You can use any valid HTML in your tooltips, like images or YouTube clips. Of course, you can combine them, like this.

How To Use It

Using Just The Tip is easy. Well, it's kinda easy, if you know a little HTML and Javascript. It goes a little something like this:

1. Grab The Code

This goes without saying, right? Download the code in this handy .zip file. It contains four files: the CSS, an image (for that snazzy arrow thing), and the javascript itself. I shouldn't have to point this out but I will: Just The Tip requires jQuery be included in your page before you can use it. So download jQuery, too.

2. Include The Source Files

Include the files in the head of your HTML page, like you would any other Javascript and CSS files. For HTML5 (what this page is written using), it goes like this:

<link rel="stylesheet" href="justthetip.css">
<script src="jquery-1.3.2.min.js"></script>
<script src="justthetip.js"></script>

3. Just Do It

To use Just The Tip, first attach a class "jttrigger-" and a numeral to the link which, when hovered over, will display the tooltip. The number you use will correspond to the tooltip that the link triggers.

<a id="jttrigger-0" id="" href="#">this is a link with a tooltip</a>

Then make your tooltip.

<div id="jttip-0" class="jttip" style="display:none;"><div class="jttipcontent"><p>Check out this rad tooltip.</p></div></div>

The above example will show up like this: this is a link with a tooltip.

4. Love Me

If you find this script has value, I'd love for you to throw me some cash (paypal) so I can keep making things like this. It's not easy being an independent web developer in 2009. Even if you don't want to donate, I'd love to . I'm also available for freelance work.

Changelog