Tooltip description for woocommerce shipping method options

    

      Copy
      
    
    
      // Create custom description field in shipping method editor and identify where it will be shown
function ecommercehints_create_shipping_method_description_field( $fields ) {
	$new_fields = array(
		'description' => array(
			'title' => 'Description',
			'type'  => 'textarea',
		),
	);
	$keys  = array_keys( $fields );
	$index = array_search( 'title', $keys, true );
	$pos   = false === $index ? count( $fields ) : $index + 1;
	return array_merge( array_slice( $fields, 0, $pos ), $new_fields, array_slice( $fields, $pos ) );
}

// Create the description field as meta
add_filter( 'woocommerce_shipping_method_add_rate_args', 'ecommercehints_create_description_as_meta', 10, 2 );
function ecommercehints_create_description_as_meta( $args, $method ) {
	$args['meta_data']['description'] = htmlentities( $method->get_option( 'description' ) );
	return $args;
}

// Display the tooltip next to the shipping method title
add_action( 'woocommerce_after_shipping_rate', 'ecommercehints_output_shipping_method_tooltips', 10 );
function ecommercehints_output_shipping_method_tooltips( $method ) {
	$meta_data = $method->get_meta_data();
	if ( array_key_exists( 'description', $meta_data ) ) {
		$description = apply_filters( 'ecommercehints_description_output', html_entity_decode( $meta_data['description'] ), $method );
		if ($description) {
			$html = '<div class="tooltip"> <i class="fa fa-question-circle" aria-hidden="true"></i><span class="tooltiptext">' .  wp_kses( $description, wp_kses_allowed_html( 'post' ) ) . '</span></div>';
			echo apply_filters( 'ecommercehints_description_output_html', $html, $description, $method  );
		}
	}
}

// Tooltip styling
add_action('wp_head', 'ecommercehints_tooltip_css');
function ecommercehints_tooltip_css() { ?>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		.tooltip {
			position: relative;
			display: inline-block;
			float:left;			/* Change this to left if you'd like the tooltip to appear before the shipping method name */
			text-align:left;		/* Change this to left if you'd like the tooltip to appear before the shipping method name */
		}
		.tooltip .tooltiptext {
			display:inline-block;
			text-indent:0;
			visibility: hidden;
			width: 120px;
			background-color: #e2e8f0;
			color: #000;
			text-align: center;
			border-radius: 3px;
			padding: 15px;
			position: absolute;
			z-index: 1;
			bottom: 100%;
			left: 50%;
			margin-left: -68px;
			font-size: small;
			line-height:1;
		}
		.tooltip .tooltiptext::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: #ff6666 transparent transparent transparent;
		}
		.tooltip:hover .tooltiptext {
			visibility: visible;
		}
	</style>
<?php
}    
    

	
How to use this
	
      Copy