Ajaxian

Tuesday, October 30th, 2007

Prototip 1.1: Adding more control to your tooltips

Category: JavaScript, Library, Prototype

<p>Nick Stakenburg has rewritten his Prototip to use Prototype 1.6:

You can now open, close and toggle tooltips using any mouse event. Keeping your tooltips open adds a new dimension to the library, allowing tooltips to be used in new ways. This release also introduces close buttons, delay and the option to add your own close links inside your tooltip text. An improved CSS model makes it even easier to style your tooltips.

Check out the various demos to see how you can contort the library:

Download Prototip 1.1.

Related Content:

• Tooltips in child elements
  A tooltip is a simple concept. You put a tooltip on a WPF control and whenever the mouse hovers over the control WPF launches the tooltip. This...
• Moveable Tooltip for Silverlight
  Expert Walt Ritscher discusses using Tooltips and Popups for images in...
• Using images in tooltips
  The tooltip came from an idea regarding how to show contextual help in the user interface and is now considered an essential part of a UX designer's...
• Deploying ToolTipText effectively for end users
  This user-submitted tip provides a simple way for end users to turn on and off...
• Nevron .NET Vision adds skin manager, tree layouts
  Nevron has updated the three tools within its .NET Vision suite, adding functionality such as a skin manager, graphical tree layouts and a ToolTip...

Posted by Dion Almaer at 6:50 am
12 Comments

4 rating from 32 votes

12 Comments »

Comments feed TrackBack URI

So… 160kb script for a Tooltip? Not counting effects lib.

Packed, thats around 60kb or so? Thanks, but I think ill write my own.

Comment by Mark — October 30, 2007

@Mark: prototip.js only 13kb unpacked. Included in the download is the latest version of prototype that’s why it’s big.

Comment by Nick — October 30, 2007

nice work. I like it

Comment by DarkRat — October 30, 2007

I like it too!

And there’s nothing wrong with the file size. Most people working on projects these days use one of the main JS APIs (jquery,mootools,prototype,ext,etc). If you happen to use Prototype, this is an excellent addition.

With example 14 I didn’t like how the tip followed the mouse for a couple of pixels — would ‘fixed: true’ have locked it in place?

Comment by mark — October 30, 2007

I noticed a few pixels of movement in a couple of examples also. Sort of distracting, I think. Otherwise, it’s very nicely done. Good job!

Comment by Dan — October 30, 2007

Anyone else notice how well designed the actual prototip page is? Excellent typography, colors and layout, imho.

And yeah, fab tooltip library :)

Comment by Pi — October 30, 2007

…very cool, I’ll have to try this out and take a look at the code!

Comment by Mark Holton — October 30, 2007

Thanks Nick for the new preview release. I am glad to see a lot of the features people were requesting have quickly made it into the next release. Thanks to everyone involved with Prototip.

Comment by Daniel Skinner — October 30, 2007

Very nice work. Already use it at my current work. Keep going, Nick.

Comment by Shuo Geng — October 30, 2007

Not a fan of tooltips that are not aware of the browser edge.
They should shift towards the centre to ensure the tooltip is never cut off.

Comment by Andrew — October 30, 2007

@Andrew: By default tooltips will stay within the viewport, unless they are fixed or hooked. This is to make sure you get them in the right position. You can toggle this behavior using the options.

Comment by Nick — October 31, 2007

Have anyone figured out how to get prototip to work with mootools?

Comment by mel — November 9, 2007