BeautyTips for Drupal forms

The BeautyTips module has become a popular and flexible way to add popup tips to any part of Drupal website pages. Popup tips provide an important usability enhancement to forms, displaying additional information to the user without cluttering the page.

It is simplest to load BeautyTips libraries on every page and add the class “beautytips” to any page element to display its title in a popup. For additional control, one may invoke BeautyTips and define custom styles within your a custom module. Here is an example from our admission website:

In your custom module:

// load beautytips js and define custom style for all admission pages
$options[‘bt_admission_tips’] = array(
‘cssSelect’ => ‘.bb_admission_beautytip’,
‘trigger’ => array(‘hover’),
‘contentSelector’ => ‘$(this).attr(“description”)’,
‘width’ => 350,
‘style’ => ‘hulu’,
‘positions’ => array(‘right’,’top’,’most’),
‘shrinkToFit’ => TRUE,

In your form array:

$form[‘field_name’] = array(
‘#type’      => ‘textfield’,
‘#description’ => t(“Explanatory text for this field. <span class=\”bb_admission_beautytip\” description=\”here is an example tooltip\”>more info</span>”),
‘#required’     => TRUE,

The tooltip appears when you hover over the text (or any other page element, such as an image).

Or define a function for more complicated popups:

  $form[‘grade_apply’] = array(
‘#type’      => ‘select’,
‘#title’        => t(‘Grade for which this student is inquiring’),
‘#options’  =>  _bb_admission_load_grades(),
‘#default_value’ => t($applicant->grade_apply),
‘#description’ => t(“Please note: grade is based on the student’s age on September 1 of the year of entry.” . _bb_admission_tip(‘dob_chart’)),
‘#required’     => TRUE,

// define tooltips for all admission pages
function _bb_admission_tip($tip) {
switch ($tip) {
case ‘dob_chart’:
return ‘ <img
description=”<h3>DOB Chart for ‘ . _bb_next_academic_year() . ‘</h3>
<p><table border=1 cellpadding=3>
<tr valign=top><td><b>Age on Sep 1, ‘ . _bb_next_fall_year() . ‘</b></td><td><b>Grade</b></td></tr>
<tr valign=top><td>4</td><td>Preschool</td></tr>
<tr valign=top><td>5</td><td>Kindergarten</td></tr>
<tr valign=top><td>6</td><td>First</td></tr>
<tr valign=top><td>7</td><td>Second</td></tr>
<tr valign=top><td>8</td><td>Third</td></tr>
<tr valign=top><td>9</td><td>Fourth</td></tr>
<tr valign=top><td>10</td><td>Fifth</td></tr>
<tr valign=top><td>11</td><td>Sixth</td></tr>
<tr valign=top><td>12</td><td>Seventh</td></tr>
<tr valign=top><td>13</td><td>Eighth</td></tr>
<tr valign=top><td>14</td><td>Ninth</td></tr>
<tr valign=top><td>15</td><td>Tenth</td></tr>
<tr valign=top><td>16</td><td>Eleventh</td></tr>
<tr valign=top><td>17</td><td>Twelfth</td></tr>

Comments are closed.