如何在定制器设置标签后面创建工具提示？

时间：2018-01-03 作者：ghoul

我想在customizer中的设置标签后显示工具提示，悬停时将显示帮助文本。我应该能够从控件或设置注册发送帮助文本，如下所示：

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

我可以添加工具提示图标并计算悬停部分。但我一直在发送帮助文本数据。

这在核心控制中是否可行？

非常感谢任何人的帮助。

1 个回复

SO网友:LWS-Mo

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 ;)

结束

标签： theme-customizer 小码农

小码农CODE

如何在定制器设置标签后面创建工具提示？

相关推荐