Drupal Views & image Title & Tooltips

Well, its time for some new and nice Drupal Tutorial. Today we are looking for the abilitiy to create easy Tooltips in Drupal 6 using Views. ( Will work on Drupal 7 with almost no change ). And we are putting those nice and crispy tooltips with any content that we want.  It will appear  mouseovering on a Image.

Online Example at: www.reich.com.pe/pedidos

The Recipe

For this Example we  are going to need this 3 modules installed on your drupal site :

• ImageField (only for drupal 6, in drupal 7 its comes in the core)
• Tipsy Module
• Views Module

Of course feel free to install any module you need to improve the view (like imagecache module).

 

How to Do It 

1) Ok, first create a view and put all the fields and filters and well, anything you want on your views excepting of course the image we want to be tooltiped.

In this case we are adding only the Title field. Lets keep it simple.

2) Now Add the field that is going to contain the tooltip info and exclude it from display.

In this case, the node body is our chosen one. Dont forget to exclude it from display

3) Next, add the field were we want the tooltip to appear, and do the following ministeps:

•  check the "Rewrite the output of this field". A textbox should appear
• Wrap your field (in this case [field_image_cache_fid])  in a div.
• Put a class called tip (or whatever word you choose) on the div.
• Put a title equal to the field on step 2.

 Do you notice the words between brackets [ ]?. Those are  replacement patterns words that essentially are all the fields that you put before the actual field youre editing. You can see a list of all the active replacement patters after the "Rewrite the output of this field" Textbox. It looks like this:

If you dont a field there, then 90% of the cases are that you added the field AFTER the field yoyre rewriting.

4) Save your view and go to the folliowing address: yoursite.com/admin/settings/tipsy. Now this is the Tipsy configuration page. In tipsy you can do two things. Configure the tooltips on all your Drupal forms (have fun) and create Custom Selectors to indicate where we want the tips to show up.

Create a Custom Selector like this:

In the Green Square we are going to put just ONE selector. Remember that we wrap a field inside a div and put a .tip class on the div?. Here we tell tipsy what page element should be Tipsied. Yes tipsied... I cant find any other word to describe that.

Save the configuration and enjoy!. Dont forget to clean caches just in case. Comments?