I am trying to find a way to display tooltips when a user hovers the mouse over a filter label of a views search page. Preferably, to reduce hard-coding, I would like to take into advantage the filter description and get the tooltip text from there (and subsequently hide descriptions through css).

Also the best way I found to actually activate the tooltips in Bootstrap is to add the attribute data-toggle="tooltip" to the element that we need to show a tooltip for.

So far I am using the recipe from here adding the data-toggle element

 function mytheme_form_element($variables){
     dpm($variables);
  $original = theme_form_element($variables);
  $return = '<div data-toggle="tooltip">' . $original . '</div>';   
  return $return;
 }

but I don't see the filter description anywhere in the $variables array plus this snippet themes the filter field and not the label but would probably do the trick.

up vote 3 down vote accepted
+50

You can do it in form alter, here's an example (add additional conditions yourself):

/**
 * Implements hook_form_FORM_ID_alter().
 */
function yourmodule_form_views_exposed_form_alter(&$form, &$form_state, $form_id) {    
  $field_name = 'filter-title';
  $form['title']['#attributes'] = array(
    'data-toggle' => 'tooltip',
    'data-original-title' => $form['#info'][$field_name]['description']
  );
  $form['#info'][$field_name]['description'] = '';
}
  • Sounds nice! Is there any way of doing this globally for all views without having to alter all? I'm having a few of them – Yannis P. Apr 7 '16 at 17:31
  • Also shall I unset the description instead? – Yannis P. Apr 7 '16 at 17:33
  • About unset - I wouldn't recommend to unset form elements, in some cases it produces warnings. – skorzh Apr 7 '16 at 18:03
  • Unfortunately, I don't know a good way to do it globally, since views filter field renders in template_preprocess_views_exposed_form() function, you even can't alter it in yours _preprocess_views_exposed_form(), because filter field has already rendered. One dirty way is to replace template_preprocess_views_exposed_form to yours function, but I would recommend you to use form_alter if its possible. – skorzh Apr 7 '16 at 18:18

As per this post

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

So you have to initialize and use like

<script>
(function($) {
$(document).ready(function() {
$('[data-toggle=tooltip]').tooltip();
});
})(jQuery);
</script>

Please visit on this post.

  • Right, I have already added the snippet above in the html.tpl.php. My question is how to show tooltips on filters, where the tooltip text comes from the filter description – Yannis P. Apr 4 '16 at 12:48

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.