Selectively disabling Bootstrap tooltips for form field elements

Submitted by Charles on Sun, 04/05/2020 - 13:45

On a Drupal 8, Bootstrap based site that I’m currently working on we have a couple of forms that have a boolean ‘Acknowledgement’ field that is displayed at the bottom.

Because we’ve enabled “Smart form descriptions (via Tooltips)” in the theme settings, the form field descriptions are not visible, but in this case we wanted to display it below the field, instead of as a tooltip.

None of the UI settings were appropriate for our use case, so we looked at the code, which showed that under certain conditions, the tooltip would be disabled, thus displaying the text visibly below the field.

The code is well documented, with one of the conditions that prevents the tooltips displaying commented as follows:

// Ignore if either the actual element or target element has an explicit // #smart_description property set to FALSE. || !$this->getProperty('smart_description', TRUE)

So that seemed pretty clear: just set a ‘#smart_description’ property on the appropriate element. In this case, setting it on $form['field_acknowledgement']['widget']['value']['#smart_description'] = FALSE; did the trick.

The array parents may differ, depending on the actual field and cardinality, but in most cases, when adding it from a hook_form_alter() it will be something like

$form['field_number']['widget']['#smart_description'] = FALSE; or
$form['body']['widget'][0]['#smart_description'] or
$form['field_email']['widget'][0]['value']['#smart_description'] = FALSE.

Just inspect the form field array, look for the widget key and then dig down to the last element of the array that has the type or base_type of the element you’re wanting to modify. If setting it via a hook_field_widget_WIDGET_TYPE_form_alter it will be something like:

$element['value']['#smart_description'] = FALSE; or
$element['#smart_description'] = FALSE;

Selectively disable Drupal 8 Bootstrap tooltip on form element