Woocommerce admin tooltip for a custom plugin

Question

I build my Woocommerce plugin and I need to put some content next to my inputs with tooltip. I found this function: wc_help_tip() from Woocommerce Docs but I don't understand, and doesn't work.

Here's my code:

<?php 
    $tip = "test";
    echo wc_help_tip($tip, false);
?>

When I debug with F12, I saw a span content:

<span class="woocommerce-help-tip" data-tip="test"></span> 

But nothing appears in frontend.

Any ideas to this? Or something else to put native tooltip of WordPress?

EDIT : I need to use it in a custom admin backend page hook not in front end nor woocommerce admin backend page

Answer 1

You should add your screen id to woocommerce. Use woocommerce_screen_ids filter

Example:

add_filter('woocommerce_screen_ids', [ $this, 'set_wc_screen_ids' ] );

public function set_wc_screen_ids( $screen ){
      $screen[] = 'your_screen_id';
      return $screen;
}

Answer 2

Make sure you had enqueued the TipTip JS for this, Here is the code which may help you, Copy the below code and paste where your all javascript files are enqueuing

<?php
wp_register_script( 'woocommerce_admin', WC()->plugin_url() . '/assets/js/admin/woocommerce_admin.js', array( 'jquery', 'jquery-blockui', 'jquery-ui-sortable', 'jquery-ui-widget', 'jquery-ui-core', 'jquery-tiptip' ), WC_VERSION );
$locale = localeconv();
$decimal = isset( $locale['decimal_point'] ) ? $locale['decimal_point'] : '.';

$params = array(
/* translators: %s: decimal */
'i18n_decimal_error' => sprintf( __( 'Please enter in decimal (%s) format without thousand separators.', 'woocommerce' ), $decimal ),
/* translators: %s: price decimal separator */
'i18n_mon_decimal_error' => sprintf( __( 'Please enter in monetary decimal (%s) format without thousand separators and currency symbols.', 'woocommerce' ), wc_get_price_decimal_separator() ),
'i18n_country_iso_error' => __( 'Please enter in country code with two capital letters.', 'woocommerce' ),
'i18_sale_less_than_regular_error' => __( 'Please enter in a value less than the regular price.', 'woocommerce' ),
'decimal_point' => $decimal,
'mon_decimal_point' => wc_get_price_decimal_separator(),
'strings' => array(
'import_products' => __( 'Import', 'woocommerce' ),
'export_products' => __( 'Export', 'woocommerce' ),
),
'urls' => array(
'import_products' => esc_url_raw( admin_url( 'edit.php?post_type=product&page=product_importer' ) ),
'export_products' => esc_url_raw( admin_url( 'edit.php?post_type=product&page=product_exporter' ) ),
),
);

wp_localize_script( 'woocommerce_admin', 'woocommerce_admin', $params );
wp_enqueue_script( 'woocommerce_admin' );

Answer 3

You don't need to load the entire WooCommerce admin scripts for this. In fact, this is part of a jQuery plugin that WooCommerce uses, and not part of the WooCommerce code itself.

So, first of all, you need to make sure that jquery-tiptip is loaded on your page:

wp_enqueue_script( 'jquery-tiptip' );

Then, you initialize the tipTip() function on your woocommerce-help-tip elements, using JS:

jQuery( function( $ ) {
    $('.woocommerce-help-tip').tipTip({
        'attribute': 'data-tip',
        'fadeIn':    50,
        'fadeOut':   50,
        'delay':     200
    });
});

make sure that when loading this script, you include jquery-tiptip as a dependency (3rd argument to wp_enqueue_script() )

wp_enqueue_script(
    'your-script',
    plugin_dir_url( __FILE__ ) . '/js/example.js',
    array( 'jquery', 'jquery-tiptip' ),
    '1.0.0'
);

Answer 4

This function is made for backend…

Below you have an example that will output the tooltip in order edit pages:

// Displayed in Order edit pages below order details on top first column
add_action( 'woocommerce_admin_order_data_after_order_details', 'displaying_tooltip_in_order_edit_pages', 10, 1 );
function displaying_tooltip_in_order_edit_pages( $order ){
    ?>
        <p class="form-field form-field-wide wc-customer-custom">Some text with a tooltip <?php echo wc_help_tip("hello world"); ?></p>
    <?php
}

Code goes in function.php file of the active child theme (or active theme).

Tested and works.

So if you add some code to display some custom fields or content in woocommerce admin pages through hooks, you can add those tooltips with wc_help_tip() function