0

I would like to show a tooltip after a setting label in customizer which on hover will show the help-text. I should be able to send the help-text from the control or setting registration like this:

$wp_customize->add_control( 'ghoul_test', array(
    'type'      => 'text',
    'label'     => __( 'Title', 'ghoul' ),
    'section'   => 'colors',
    'help-text' => __( 'This is help text.', 'ghoul' ),
) );

I can add the tooltip icon and worked out the hover part. But I am stuck on sending the help-text data.

Is this possible in core controls or not?

Anyone help is very much appreciated.

2
  • How are you building the tooltip. What tooltip script are you using or you code that yourself? If the tooltip-text can be added as an data-attribute, to the input, take a look at input_attrs parameter of add_control. From the codex: Allows you to add attributes to the input. This extends beyond just using min, max, and step for number and range, to the ability to add custom classes, placeholders, the pattern attribute, and anything else you need to the input element. Look here. Or create a custom control.
    – LWS-Mo
    Jan 5 '18 at 14:48
  • Thanks for the tips. I want to do so in the default controls first without creating the custom ones. The problem I am facing is how to send the data to the default ones using the add_control parameters.
    – ghoul
    Jan 8 '18 at 17:46
1

You can send the data via input_attrs parameter of add_control. However with that you can add attributes to the input field only.

Iam using Tipr here for the tooltips. You can find it here.
But you can also use other scripts or also the default bundled jQuery-UI.
Default WP scripts in the codex.

Also with this way no custom control is needed.

I created a new customizer section and add a setting and control to it:

//Add new section
$wp_customize->add_section( 'my_custom_section' , array(
    'title'      => __( 'My Section Name', 'textdomain' ),
) );

//Add new setting
$wp_customize->add_setting('text_setting', array(
    'default'        => 'Some default value',
) );
$wp_customize->add_control('text_setting', array(
    'label'   => __( 'My Setting', 'textdomain' ),
    'section' => 'my_custom_section',
    'type'    => 'text',
    'input_attrs' => array(
        'class' => 'has-tooltip', // add class to input element
        'data-tip' => 'My custom tooltip!', // add 'data-tip' attribute to input element
        'data-mode' => 'above', // add 'data-mode' attribute to input element
    ),
) );

Take a look at the 'input_attrs' parameters of add_control. Iam adding 3 different attributes to the input field, that means that the markup of the input field will be:

<input class="has-tooltip" data-tip="My custom tooltip!" data-mode="above" value="Some default value" data-customize-setting-link="text_setting" type="text">

After that we enqueue the tooltip scripts and style to the customizer via customize_controls_enqueue_scripts:

function custom_customizer_enqueue() {

    //Enqueue Tipr JS and CSS
    wp_enqueue_script( 'tipr-js', plugins_url('/tipr/tipr.min.js', __FILE__) );
    wp_enqueue_style( 'tipr-css', plugins_url('/tipr/corso.css', __FILE__) );

    //Enqueue custom script to initialize the tooltips
    wp_enqueue_script( 'my-init-script', plugins_url('/customizer.js', __FILE__), '', false, true );

}
add_action( 'customize_controls_enqueue_scripts', 'custom_customizer_enqueue' );

Now we just need to initialize the tipr tooltip in the customizer.js file:

jQuery(document).ready(function($){
    $('.has-tooltip').tipr();
});

In the customizer this will look like this:
enter image description here

If it is not what you are looking for, feel no pressure to not accept it as an answer ;)

2
  • Thanks this is somehow what i wanted. But it works only on input type number and text. Right? Is there any workaround for other input types like radio, select?
    – ghoul
    Jan 10 '18 at 15:37
  • I did not test it with this control types but I guess you are right. Even if it would work, it would not be ideal I think, because the tip would not show if you hover over the label. I found this article, maybe this will be more usefull for you: Using tooltips instead of option descriptions in the WordPress Theme Customizer
    – LWS-Mo
    Jan 12 '18 at 9:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.