Woocommerce admin tooltip for a custom plugin

2

votes

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

phpwordpresswoocommercetooltipbackend

4

votes

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

1

votes

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

0

votes

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

Woocommerce admin tooltip for a custom plugin

3 Answers