How to create a tooltip behind a customizer setting label?

Question

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:

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

Related Posts: