Adding tooltip to describe the lack of refund deductions from revenue summaries (https://github.com/woocommerce/woocommerce-admin/pull/8187)

plugins/woocommerce-admin/changelogs/add-7997-add-tooltip

@@ -0,0 +1,4 @@
+Significance: minor
+Type: Add
+
+Adding tooltip to describe the lack of refund deductions from revenue summaries. #8187

plugins/woocommerce-admin/client/analytics/components/report-summary/index.js

@@ -82,6 +82,7 @@ export class ReportSummary extends Component {
 					label,
 					type,
 					isReverseTrend,
+					labelTooltipText,
 				} = chart;
 				const newPath = { chart: key };
 				if ( orderby ) {
@@ -109,6 +110,7 @@ export class ReportSummary extends Component {
 						prevValue={ prevValue }
 						selected={ isSelected }
 						value={ value }
+						labelTooltipText={ labelTooltipText }
 						onLinkClickCallback={ () => {
 							// Wider than a certain breakpoint, there is no dropdown so avoid calling onToggle.
 							if ( onToggle ) {

plugins/woocommerce-admin/client/analytics/report/revenue/config.js

@@ -41,6 +41,10 @@ export const charts = applyFilters( REVENUE_REPORT_CHARTS_FILTER, [
 		orderby: 'net_revenue',
 		type: 'currency',
 		isReverseTrend: false,
+		labelTooltipText: __(
+			'Full refunds are not deducted from tax or net sales totals',
+			'woocommerce-admin'
+		),
 	},
 	{
 		key: 'taxes',
@@ -49,6 +53,10 @@ export const charts = applyFilters( REVENUE_REPORT_CHARTS_FILTER, [
 		orderby: 'taxes',
 		type: 'currency',
 		isReverseTrend: false,
+		labelTooltipText: __(
+			'Full refunds are not deducted from tax or net sales totals',
+			'woocommerce-admin'
+		),
 	},
 	{
 		key: 'shipping',

plugins/woocommerce-admin/packages/components/src/summary/number.js

@@ -8,6 +8,7 @@ import ChevronDownIcon from 'gridicons/dist/chevron-down';
 import { isNil, noop } from 'lodash';
 import PropTypes from 'prop-types';
 import { createElement } from '@wordpress/element';
+import { Icon, info } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -25,6 +26,7 @@ import { Text } from '../experimental';
  * @param {string} props.hrefType
  * @param {boolean} props.isOpen
  * @param {string} props.label
+ * @param {string} props.labelTooltipText
  * @param {Function} props.onToggle
  * @param {string} props.prevLabel
  * @param {number|string} props.prevValue
@@ -41,6 +43,7 @@ const SummaryNumber = ( {
 	hrefType,
 	isOpen,
 	label,
+	labelTooltipText,
 	onToggle,
 	prevLabel,
 	prevValue,
@@ -107,6 +110,20 @@ const SummaryNumber = ( {
 					<Text variant="body.small" size="14" lineHeight="20px">
 						{ label }
 					</Text>
+					{ labelTooltipText && (
+						<Tooltip
+							text={ labelTooltipText }
+							position="top center"
+						>
+							<div className="woocommerce-summary__info-tooltip">
+								<Icon
+									width={ 20 }
+									height={ 20 }
+									icon={ info }
+								/>
+							</div>
+						</Tooltip>
+					) }
 				</div>
 
 				<div className="woocommerce-summary__item-data">
@@ -179,6 +196,10 @@ SummaryNumber.propTypes = {
 	 * A string description of this value, ex "Revenue", or "New Customers"
 	 */
 	label: PropTypes.string.isRequired,
+	/**
+	 * A string that will displayed via a Tooltip next to the label
+	 */
+	labelTooltipText: PropTypes.string,
 	/**
 	 * A function used to switch the given SummaryNumber to a button, and called on click.
 	 */

plugins/woocommerce-admin/packages/components/src/summary/style.scss

@@ -315,12 +315,22 @@ $border: $gray-200;
 	}
 
 	.woocommerce-summary__item-label {
-		display: block;
+		display: flex;
 		margin-bottom: $gap;
 
 		color: $gray-700;
 	}
 
+	.woocommerce-summary__info-tooltip {
+		color: $gray-600;
+		line-height: 1em;
+		margin-left: $gap-smallest;
+
+		svg {
+			fill: currentColor;
+		}
+	}
+
 	.woocommerce-summary__item-value {
 		margin-bottom: $gap-smallest;
 		font-weight: 500;