Drupal - How to move "description" below the "label" for a field in a form?

Have a look at Label help module. It just creates a second help field that will appear directly below the form element's label.

It is a simple way to turn around the problem.

Or try something like

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

  // move the help text from below the input field to directly below the field label

  $('.form-item .description').each(function () {  // description is the help text
    var desc = $(this);
    var label = desc.siblings('label:first');
     if (label.length) {
       desc.insertAfter(label);
     }
  })
  // the help text is tangled up in the text format stuff on a filtered text field
  $('.text-format-wrapper .description').each(function () {
    var desc = $(this);
    var label = desc.siblings('.form-item').find('label:first');
     if (label.length) {
        desc.insertAfter(label);
     }
  })
});

(thanks to El bandito !)


You can't move it, but you can always work around things in Drupal.

A hook_form_alter() or better hook_form_FORM_ID_alter() (for a specific form) would be needed to solve your problem.

Inside the form alter, you can use the following code to place the description in different positions. The example is just for the body field, but you can apply the same logic to other fields as well.

// Get the language of the field
$lang = $form['body']['#language'];
// Check if a description exists
if (!empty($form['body'][$lang][0]['#description'])) {
  $body_field = &$form['body'][$lang][0];

  // Create new description markup and delete the default description
  $description = '<div class="custom-description">'. $body_field['#description'] .'</div>';
  $body_field['#description'] = '';

  // Place description before the field (between label and field)
  $body_field['#field_prefix'] = empty($body_field['#field_prefix']) 
                                 ? $description 
                                 : $description . $body_field['#field_prefix'];
}

And of course, you'll need to add the proper CSS for the new description markup.


Drupal 7

The module Form element layout solves this both at API level and through the Field settings UI.

As a developer you would use the FAPI attribute #description_display and set it before if you want it between the #title and #children, i.e. after the label and before the input element(s):

$form['example'] = array(
  '#type' => 'textfield',
  '#title' => t("Example input"),
  '#description' => t("Example description of what this element does."),
  '#description_display' => 'before',
);

And as a site builder you would just configure your field settings and toggle the description position.

Note: This module will use replacement themes for various parts of Drupal that renders #title and #description, so if your theme already has overridden some of these, they won't "take" anymore and you will have to override the themes provided by Form element layout instead.

Drupal 8

At API level this is already possible using the same FAPI attribute as above, #description_display. In addition to the values before and after it also supports invisible, just like #title_display.

Field UI wise, we're still waiting for issue #2318757.

Tags:

Entities