Tooltips on Forms
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?
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
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:
'#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:
$(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.
Very creative, Bill, nice work! And thank you for sharing the solution, this looks good. :)
Cheers!
Chris
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