• John Huebner

• June 16, 2019 at 4:37 am

This is a little something that I have created so that I can see field information when I’m developing a site. This adds an information block to every field label that shows the field information when you hover over the label.

add_action('acf/prepare_field', 'acf_add_field_details_for_display', 20);
function acf_add_field_details_for_display($field) {
  if (!$field || 
      !acf_current_user_can_admin() || 
      get_post_type() == 'acf-field-group' ||
      !get_field('site_acf_field_info', 'options')) {
    return $field;
  }
  $html = ' <span class="acf-field-details"><span class="show-field-details dashicons dashicons-info" data-action="show-field-details"></span><span class="acf-field-details-block"><span>&nbsp;&nbsp;type: '.$field['type'].'</span>';
  if (isset($field['_name']) && $field['_name']) {
    $html .= '<span>&nbsp;&nbsp;name: '.$field['_name'].'</span>';
  }
  $html .= '<span>&nbsp;&nbsp;&nbsp;key: '.$field['key'].'</span>';
  if (isset($field['return_format']) && $field['return_format']) {
    $html .= 'return: '.$field['return_format'].'</span>';
  }
  $html.= '</span>';
  $field['label'] .= $html;
  return $field;
}

add_action('admin_head', 'acf_field_details_display');
function acf_field_details_display() {
    // add field detials info for admins
    if (!function_exists('get_field') || !get_field('site_acf_field_info', 'options')) {
      // no acf
      return;
    }
    if (!acf_current_user_can_admin()) {
      return;
    }
    ?>
      <style type="text/css">
        .acf-field-details {
          font-weight: normal;
          position: relative;
        }
        .show-field-details {
          color: #ACD;
          font-size: 16px;
        }
        .acf-field-details-block {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 9999;
          border-radius: 5px;
          color: #333;
          background-color: #ACD;
          padding: 5px;
          font-family: "Courier New", Courier, monospace;
          font-size: .9em;
        }
        .acf-field-details-block span {
          display: block;
          white-space: nowrap;
        }
        .acf-field-details:hover .acf-field-details-block {
          display: block;
        }
      </style>
    <?php 
  } // end function acf_field_details_display