BeautyTips
Pop up tooltips can be a pain to create with standard HTML – particularly if you have a design that requires the tooltips to have rounded corners, point at the element they belong to and resize text on the user’s request. BeautyTips is a jQuery plugin created by Jeff Robbins which uses the canvas element to dynamically draw tooltips taking away quite a lot of the pain.
Beauty Tips
The tooltips can be requested via a variety of different ways, and delays can be added if required. The tooltips can also be styled however you would like and Jeff has provided examples of the tooltips styled as if they were on Facebook, Google Maps or Netflix.
Implementing BeautyTips is simple, with a little extra complexity added for customising the tip. It can be as simple as the following (which will add a tooltip to every tag with the title attribute):
$('[title]').bt();
Or it could be more complex using a variety of BeautyTips options for a more controlled red balloon with white text style:
$('a[href]').bt({
titleSelector: "attr('href')",
fill: 'red',
cssStyles: {color: 'white', fontWeight: 'bold', width: 'auto'},
width: 400,
padding: 10,
cornerRadius: 10,
animate: true,
spikeLength: 15,
spikeGirth: 5,
positions: ['left', 'right', 'bottom'],
});
BeautyTips works in Firefox, Safari and Opera; with support for Internet Explorer using ExCanvas.
Download the BeautyTips tool, or check out the demos to see just how flexible it can be!
Related demos