by Jeff Robbins on February 6, 2009 // Short URL

BeautyTips 0.9 Release

I've just released the new version of BeautyTips (0.9). New features include:

  • A demo page - The new demo page provides lots of documentation and examples for BeautyTips. The demos include examples which emulate some famous javascript popup balloons from around the web. There are currently examples emulating popups from Google Maps, Netflix, and Facebook. The demo page also has some tricky (and a little experimental) "live" javascript fields so developers can experiment with different options and see how the BeautyTips are affected.
  • Ajax content - Content can now come from other pages on your site*. The ajax argument takes not only a URL, but also an optional jQuery selector. This means that you can use just part of an existing page as the content of your BeautyTip. The Do It With Drupal video page is a great example of this. Just roll over the thumbnail images to see it in action.
  • Click-anywhere-to-close - This default behavior means that any open BeautyTips will be closed whenever the visitor clicks anywhere in the body of the page (outside of the tip or target elements).
  • Close-when-others-open - This option (normally disabled) can ensure that only one tip is open at a time.
  • bgiframe plugin support - IE has (yet another) goofy behavior where form elements don't seem to respect z-indexes. If you're having this problem, simply include the bgiframe plugin on your page and BeautyTips will recognize it and use it.
  • Beauty TipshoverIntent plugin support - hoverIntent is a great jQuery plugin which attempts to determine if a user intends to be hovering over (or out of) an element before the hover event is fired. It has configurations for how long to wait before trigering the 'over' and 'out' functions. Check out the BeautyTips demo page to see how this works.
  • activeClass on target elements - Whenever an element has an active BeautyTip, it gets the "bt-active" class. This class-name can be changed globally or locally using the options arguments. Example
  • Changed to - Just a code cleanup thing. This may affect people with existing implementations of BeautyTips. Just remove the "fn" from your global option overrides.
  • Changed "titleSelector" option to "contentSelector" - Just for clarity. Again, if you've got an existing implementation, just do a search and replace.
* For security reasons, most browsers will not allow cross-domain html calls. You will get a security error if you try this.

Awesome! Where do I get it?

You can download from the BeautyTips plugin page on That's also where you should submit any bugs or feature requests.

Jeff Robbins

Co-Founder & CEO

Want Jeff Robbins to speak at your event? Contact us with the details and we’ll be in touch soon.



I just discovered this

I just discovered this plugin and looks awesome! it's a great idea to use canvas instead of the regular css and images that most tooltip plugins use, I always struggle to make tooltips look like the designer wanted, this will hopefully make it easier.
Can't wait to play with this :-P



Ahah use

What is the best technique for Ahah'ing in a view. My first instinct says to make a light template file that the request goes to. That seems a little un-drupal like though.

Is the right answer to right a module to serve up that content?

Either way this is going in to the site I am building today. Thanks Jeff :-)


Karl Swedberg


Wow, Jeff! You've done some amazing work on this plugin. I love it!

One thing I thought I should point out is that when I go to the demo page, I get the twirling beachball for a few seconds (Mac OS X) until the page loads, and then everything loads at once. Not sure if the cause is server-side or client-side, but thought I'd let you know.

Again, great, great job!


Antonio Ciccarone

Very Cool

I love this plugin - thanks a bunch. I did some stalking, not really, and I see that you live in Providence RI. That's my home town, over in California now. Enjoy the weather... watch out for those crazy RIPTA's.



Great stuff Jeff! I was

Great stuff Jeff! I was literally a day or two away from getting in and making some customizations to the previous version to achieve some of what you've done. I'm sure you've saved me a load of time! Love it!



Awesome Plugin.. but found a Little "bug"

Hi Jeff, first off I want to say thanks.. I've been looking for hours for a decent tooltip plugin and this one hit the spot. Well done!

I do however have a small problem with your plugin, when one places a link in the tooltip and has the "blur" event enabled, the link is simply unclickable, as the "blur" event triggers before the link is activated, so as soon as someone tries to click the link, the tooltip vanishes and so does the link.

Of course this is really the way it's "supposed" to work to begin with, but it makes creating tooltips with links a bit annoying, as right now I had to remove the blur event, but this means that when someone clicks another item that triggers a tooltip, the original tooltip will still be up as well.. as a reference check my sig generator where I use your plugin:

Click on the "Color" field and then switch to a different field (eg. Y Pos).. you will have 2 tooltips overlapping each other.

I think this plugin would really benefit from an option that would let you close all open tooltips before it shows a new one.

Hope you will consider this.. thank you! :)



Nevermind .. ;-)

Just found it; = true;

Sorry.. didn't check thoroughly enough..

Thanks again for the awesome plugin :)




I love it when I've already fixed things!


Kim Steinhaug

Very nice tooltips - Great work!

Theese canvas tooltips were really nice, I would so much like to use them! However I do have a problem (that is - I have it - you dont, LOL). I am attached to the Prototype framework, so I need to atleast run the plugin in compability mode.

Needless to say I tried the var $j = jQuery.noConflict(); option, and replacing the $ with $j around in the script, however normal tooltips appears. I pretty much guess it has to do with you requiring more libraries, I do not know.

So the my big question would be, WHY would you want to make a version in compatibal mode of this great script? Maby I'll improove my skills here, and figure it out.

Anyways, the input tooltips are sweeeet!



hey there really looks

hey there

really looks amazing.
quesick question: is there a way to allow the image version tooltip, have its SRC attribute drawn from the REL or something.
<a href="somlink.html" rel="/uploads/image.jpg"><img src="123.jpg"></a>

in your demo above, you have the image SRC hard coded into the javascript, where as it might be useful (as in the case of a photo gallery) to have the source draan automtically.

thanks again!



Image Gallery!

Ooh! I like that. There are a couple of ways to tackle it, but I'm trying to move these types of support requests over to the "proper" BeautyTips issue queue. Please post over there and it will make responding and archiving much easier. Thanks!


Anoopd D

Beauty Tips .. Really great

HI Jeff,

Wonderful work again ...!!! thank you so much .. think shelfari widget was on your mind when you were trying to do this ... anyway i am sure i ll be using it in my next few projects ....
ty once again for this wonderful work ...




What a great implementation!

What a great implementation! Really well done. The tips look really nice.

I will definitely point people to this as an example.

Nice work!



Stays active when mouse over.

I read two different feature requests/bugs on jquery's site. Is there any way to keep the tooltip up after you mouse over it. So you can put links inside the tip and them be click able. With the target still activating on mouse over and not via clicks. I've seen this done all over the place. I've tried using div's and the btnOn and btnOff functions but that is rather clunky.



Great plugin until IE8 spoils the party...

Jeff, I was using bt in a project and it was working juuuust fine in IE7, FF and Chrome. But, I had to install IE8 and all the problems come to life!!

The only place I've seen canvas working is on bt demo page. I've also downloaded the excanvas rc3 but the tips still are with no background, they are just transparent.

How could you fix this in IE8???

Thanks!! :-)



saving the options

Anyone know how I could save the options to a variable name so I did not have to duplicate them for each tool tip ? When I say Options i mean fiil, cornerradius etc





Problems with IE8


First, fantastic plugin! I am using it for the last 6 months without any problem.

... Until now. I just realize it is not displaying the tips under IE8. In fact it is displaying them but without the bubble and background.
So I did a Google search on that and find out that I needed the right version of excanvas.
Updated it. Still the same result. I then checked the demo page and realized that I need to use the latest version 0.9.5-rc1 of the BT plugin.
Updated it and... working!... But well not really. Now the tips that are on the right edge of my main div section are partly hidden and an horizontal scroll bar appear at the bottom of that div section!!
I went trough all the open bugs (on the jQuery web site) and I cannot find something really similar to that.
Is it related to that new "offsetParent" option?

Can anybody help?