Last updated June 12, 2014. Created by peterx on June 12, 2014.
Log in to edit this page.

BeautyTips, https://drupal.org/project/beautytips, adds popups to any HTML element, usually for help text, and is documented at http://cgit.drupalcode.org/beautytips/tree/README.txt?id=HEAD. This is the start of my notes on Beautytips.

Demo

There is a nice demo of Beautytips at the following address. Go try it out. Try to break it.
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

Alternatives

I have used qTips version 1. There is a version 2 in beta and it has Webform support but requires jQquery update, something that breaks a few sites.

Dependencies

Beautytips uses the HTML canvas element and requires the ExplorerCanvas library to add the canvas element to early versions of IE. Read the README then visit: http://excanvas.sourceforge.net/

jQuery compatibility

Beautytips works with the standard jQuery in Drupal 7.

Webform compatibility

No. I am experimenting with a Webform help tip module inspired by, and partially copied from, the qtip Webform module.

Hover/click

Beautytips works with hover and click. There is a nice demo mentioned above. The demo shows both hover and click. Given that it is jQuery activated, you can use hover delay and everything else from jQuery. You could build really complicated interactions.

Your skill set

Beautytips installs the same as any other Drupal module. You then visit the administration configuration page, select Beautytips under User interface, and set some options. Normal module admin stuff.

You can select a default style for your Web site. The selection options display the result of the selections. Everything is too easy at this stage.

For each tip, you set a selector and the information to be displayed. You need to understand the jQuery use of CSS selectors and be able to find out what is required for the HTML element where you want to add the tip.

Firefox has the excellent Firebug add-on to display the element structure with CSS inheritance. Other browsers have equivalents.

Formatting the result

Select the nearest option in the configuration. You can add additional options when you create a tip. Your tip can include HTML to be styled by CSS.

The content of the tip can be a HTML element off the page. You could create content on the page, format the content, experiment with formatting, then set the content to display:none and include the content into your tip.

There are so many ways to format the output, it deserves a whole child page by itself.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.