Tooltips on Forms

4 replies [Last post]
bill
Offline
Last seen: 10 years 22 weeks ago
Joined: 2011-06-04

Is there a specific method that can be used to render things like the #description for a $form entry as a tooltip rather than text underneath the field? Is there an alternative method that I should use to generate a tooltip?

Chris Shattuck
Offline
Last seen: 10 weeks 3 days ago
Joined: 2009-08-16
Great question, Bill. I'd

Great question, Bill. I'd love to do a tutorial on this at some point.

If you look at the Tao theme (http://drupal.org/project/tao), you can see an example of how they're approaching this. You'll be using some jQuery to hide the description and pull it into an element that gets triggered on or off depending on where the focus is, or where the mouse cursor is on the form.

I hope this points you in the right direction!

Cheers!
Chris

bill
Offline
Last seen: 10 years 22 weeks ago
Joined: 2011-06-04
Thanks. I'll have to try

Thanks. I'll have to try that when I get familiar enough with jQuery to implement it. That's another rung on my knowledge ladder that needs to be climbed, but isn't at the top of the priority list. I appreciate the help!

Bill

bill
Offline
Last seen: 10 years 22 weeks ago
Joined: 2011-06-04
Implementation Method

I just completed implementing this and wanted to share my approach.

First, in the $form item, you'll want to assign id tags to both your tooltip icon and the form item description, as shown below:

$form['price'] = array (
    '#title' => t('Price'),
    '#type' => 'textfield',
    '#default_value' => t(500),
    '#field_prefix' => t('$'),
    '#field_suffix' => <img id="tooltip" src="image.jpg">,
    '#description' => t('<div id="tooltip_text">The price you pay</div>'),
);

That will place the appropriate HTML on the web page for you to access using jQuery. In your .js file, you can use the following method:

(function ($) {
    $(document).ready(function() {

        $('img#tooltip').mouseenter(tip_enter); {
        }
    }
    function tip_enter() {
        var tiptext = $('#tooltip_text').text();
        $('img#tooltip').attr('title', tiptext);
    }
})(jQuery);

You would also want to hide the description in the form. You can do that by inserting:

$(.description).hide();

In your .js file. I'm actually pulling the description from a MySql table, so the requirements for implementing this were a little more complex than a normal tooltip.

Chris Shattuck
Offline
Last seen: 10 weeks 3 days ago
Joined: 2009-08-16
Very creative, Bill, nice

Very creative, Bill, nice work! And thank you for sharing the solution, this looks good. :)

Cheers!
Chris

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.