Quick and Easy Beauty Tips

On a recent project I wanted to use the jQuery BeautyTips module to help me convey more information to the user while saving space on the page.

This plugin was created by Jeff Robbins of Lullabot fame and has a project page at this link.

You have probably seen the video about how to enhance drupal views with BeautyTips at this link. While that method works well, I think mine is easier. Feel free to let me know what you think.

I use the Views Customfield module to help be build the text for the BeautyTip. This is an awesome little module that lets you add a custom field to your views. There are 3 types of custom fields you can add; PHP, Markup, and Rownumber. The PHP field is very powerful on its own but this method of building quick BeautyTips uses the Markup field. The Markup field as described on the project page is a "Field that allows usage of custom text and the input filter system."

So let's say you have a content-type for customers. The node title is the customer name and you have added a field for phone number, address, and picture. You want to create a view that lists the customers by name but when you roll the cursor over the name you get a fancy BeautyTip popup showing their information.

I'm going to assume you know how to work with views and already have a content-type called customer.

Create a new view and add a page display for the list. Filter by the usual "node - is published" and "node-type - customer".

Add the following fields;

Content: Phone - check 'Exclude from display'
Content: Address - check 'Exclude from display'
Content: Customer Logo - check 'Exclude from display'
Customfield: Markup - check 'Exclude from display'
Node: Title

Choose Markup

Views Fields

The Fields section of your view should look like the image above.

Exclude From Display

Markup Field

Title Field

Note that the order is important here. If you click on the "Customfield: Markup" field and check the box that says 'Rewrite the output of this field', a textbox and some other information will appear. Look at where it says "Fields" and you will see a list of all the fields you have previously added. If you have been following along with this, it should look as follows

* [field_phone_value] == Content: Phone (field_phone)
* [field_address_value] == Content: Address (field_address)
* [field_customer_logo_fid] == Content: Customer Logo (field_customer_logo)
* [markup] == Customfield: Markup

What this means is that you have available to you the values of all the fields listed here. Any field that comes after the customfield will not have its values available to the customfield, so that is why order is important.

In the box labled 'Text:' enter the following:

<div>[field_customer_logo_fid]</div>
<strong>Phone:</strong> [field_phone_value]<br>
<strong>Address:</strong> [field_address_value]

Click update to save your field settings.

Now click on the Node:title field, check 'Rewrite the output of this field' and type the following in the text box:

<span class='btytp' title='[markup]'>[title]</span>

What we are doing here is simply rewriting the output of this field in order to put the value of '[markup]' into the title attribute of the span element. And the value of [markup] is the logo, phone number, and address in html format.

Under 'Basic settings' click on Header and type the following in the text box.

<?php
drupal_add_js (
  '$(document).ready(function()
  {
    $(".btytp").bt();
  }); ',
    'inline');
?>

Be sure to choose PHP as the input format.

Views Live Preview

This is the BeautyTips jQuery code that will find all the elements with a class name of 'btytp' and attach the BeautyTips ballon to it.
One thing to keep in mind here is that the BeautyTip ballon will not work in Views Live Preview, at least it didn't for me. I had to add a page display and give it a path, then I could test my new BeautyTips. But if you put your cursor over the views output in Live Preview you should get the normal 'Tool Tip' that will show you the value of the title attribute.

If all goes well you should have something like you see in the images here.

BeautyTips!

This trick came about while I was working on a recent website redesign which I covered in detail in a case study. I used this BeautyTips trick in several places, but in particular you can see how I used the Customfield PHP Code field type in this section.