Merge pull request #3865 from 10up/feature/3851

Add tooltips for meta keys to the weighting screen.
10up · Mar 18, 2024 · 22efccb · 22efccb
2 parents c014edc + 7aadce0
commit 22efccb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/assets/js/weighting/components/field.js b/assets/js/weighting/components/field.js
@@ -1,7 +1,7 @@
 /**
  * WordPress Dependencies.
  */
-import { Button, CheckboxControl, RangeControl } from '@wordpress/components';
+import { Button, CheckboxControl, RangeControl, Tooltip } from '@wordpress/components';
 import { WPElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { trash } from '@wordpress/icons';
@@ -14,9 +14,10 @@ import { trash } from '@wordpress/icons';
  * @param {Function} props.onChange Change handler.
  * @param {Function} props.onDelete Delete handler.
  * @param {object} props.value Values.
+ * @param {boolean} props.showTooltip Whether to show field name tooltip.
  * @returns {WPElement} Component element.
  */
-export default ({ label, onChange, onDelete, value }) => {
+export default ({ label, onChange, onDelete, value, showTooltip }) => {
 	const { enabled = false, weight = 0 } = value;
 
 	/**
@@ -45,7 +46,15 @@ export default ({ label, onChange, onDelete, value }) => {
 	return (
 		<div className="ep-weighting-field">
 			<fieldset>
-				<legend className="ep-weighting-field__name">{label}</legend>
+				<legend className="ep-weighting-field__name">
+					{showTooltip ? (
+						<Tooltip text={label}>
+							<span>{label}</span>
+						</Tooltip>
+					) : (
+						label
+					)}
+				</legend>
 				<div className="ep-weighting-field__searchable">
 					<CheckboxControl
 						checked={enabled}

diff --git a/assets/js/weighting/components/group.js b/assets/js/weighting/components/group.js
@@ -168,6 +168,7 @@ export default ({ group, postType }) => {
 						onDelete={() => {
 							onDelete(key);
 						}}
+						showTooltip
 					/>
 				</PanelRow>
 			))}