Add html to field label

Get Help
, , , ,
1

I would like to add html to the field label (or after the field label) in order to create a tooltip.

Tried the following:

add_filter('gform_pre_render_1', 'populate_tooltip');
add_filter('gform_pre_validation_1', 'populate_tooltip');
add_filter( 'gform_admin_pre_render_1', 'populate_tooltip' );
add_filter('gform_pre_submission_filter_1', 'populate_tooltip');
function populate_tooltip($form) {
    foreach ($form['fields'] as &$field) {
        if ($field->id == 30) {
			$tooltip = ' <div class="tooltip">Hover over me<span class="tooltiptext">Tooltip text</span></div>';
			$field['label'] .= $tooltip;
        }
    }
    return $form;
}

It outputs the div as text, not as html element.

Scherm­afbeelding 2023-01-28 om 18.01.20
Scherm­afbeelding 2023-01-28 om 18.01.201472×174 14.2 KB

Anyone knows how to add html to or behind the label?

2

You are attempting to add a tooltip to a field label in Gravity Forms using a WordPress filter. The issue you are facing is likely caused by the fact that the field label is encoded as plain text instead of HTML.

Fortunately, there is a solution to this problem. Utilizing the gform_field_content filter instead of the gform_pre_render filter can help you modify the HTML output of a field. This contrasts the gform_pre_render filter, which only allows you to modify the field properties.

Example:

add_filter( 'gform_field_content', 'populate_tooltip', 10, 5 );

function populate_tooltip( $content, $field, $value, $lead_id, $form_id ) {
    if ( $form_id == 1 && $field->id == 30 ) {
        $content = str_replace  ( $field->label, $field->label. 'ddiv class="tooltip">  Hover over me<span class="tooltiptext"> Tooltip text</span></div>', $content );
    }
    return $content;
}

This will add the tooltip DIV immediately after the field label, and the tooltip text will be displayed when the user hovers over the label.

3

Work like a charm! Thanks a lot!