Kids :
"Mommie I want those cool bubble tips for me site, me site is drupal.."

Mom :
"Worry no more me son, me got you Beauty Tips... "

Want to have cool bubble tips for your drupal site but have no skill in cracking those confusing jQuery script?

Look no further, just download the BeautyTips module, unpack it to your drupal module installation folder, do some configuration in it's admin page and voila you got your self bubble tips for your form textfield.

By default the module will fetch the ".description" content of your textfield and turn the information plus the html structure into a cool bubble tips, There are several style of bubble tips that you can choose from in the module configuration page.

If you are wondering... how about the other form element?

Lucky you, We got just the medicine for it!

It will involve slight hacking into the module file (beautytips.module). Sure any developer will tell you not to hack any core... If you REAALLLY don't want to hack core:

1. build your own jQuery script using the beauty tips jQuery plugin
2. beg and hope the module maintainer to update the module and release it.

Otherwise, you can do this change in the beautytips.module file :

1. look for the function beautytips_init() , it should be on the top of the page.

2. inside the function add these lines for checkboxes and select box tips :

the modification should be under :

$options['.beautytips']['cssSelect'] = '.beautytips';

after the above line insert these lines :

  $options['bt_select_element'] = array(
    'cssSelect' => '.form-select',
    'contentSelector' => "$(this).parents('.form-item').find('.description').hide().html()",
    'trigger' => array('hover'),
    'width' => 350,
    'style' => 'hulu',
  );
  
  $options['bt_checkbox_element'] = array(
    'cssSelect' => 'label.option',
    'contentSelector' => "$(this).parents('.form-item').find('.description').hide().html()",
    'trigger' => array('hover'),
    'width' => 350,
    'style' => 'hulu',
  );

Note :
1. Style and Width is safe to change to your needs
2. Trigger can be changed too but after some testing, seems that hover is the best solution for forms that will be refreshed using ajax such as the views user interface form.
3. cssSelect and contentSelector may not work with custom theme that rearrange or chane the form element structuring or name, I did this basically with garland theme.

After the you do the change, save the module and enjoy the tips!.

If you are wondering whether you can do this with other element aside the form element... then the answer is YES!.

I use the module for other element than form element, for example using this code :

$options['bt_album_element'] = array(
  'cssSelect' => 'div.multimedia-content-item-wrapper',
  'contentSelector' => "$(this).find('div.multimedia-album-information-fullpage').hide().html()",
  'trigger' => array('hover'),
  'width' => 350,
  'style' => 'hulu',
);

Where "div.multimedia-content-item-wrapper" is my element that user will hover their mouse cursor to and "$(this).find....." is my jQuery logic to find the text that will be displayed inside the tips.

So what are you waiting for? grab the module and begin beautifying your site..