How to show tooltips on form labels based on view filter descriptions in a Bootstrap sub-theme?

Question

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.

Answer 1

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'] = '';
}

Answer 2

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.