add tooltip to each icon in icon picker

10up · Aug 4, 2023 · c9ffc98 · c9ffc98
1 parent dd6581a
commit c9ffc98
Showing 1 changed file with 11 additions and 10 deletions.
diff --git a/components/icon-picker/icon-picker.js b/components/icon-picker/icon-picker.js
@@ -5,8 +5,8 @@ import {
 	CheckboxControl,
 	BaseControl,
 	NavigableMenu,
-	VisuallyHidden,
 	SearchControl,
+	Tooltip,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useState, memo, useMemo } from '@wordpress/element';
@@ -113,15 +113,16 @@ IconPicker.propTypes = {
 const IconLabel = (props) => {
 	const { icon, isChecked } = props;
 	return (
-		<>
-			<StyledIconButton
-				selected={isChecked}
-				key={icon.name}
-				name={icon.name}
-				iconSet={icon.iconSet}
-			/>
-			<VisuallyHidden>{icon.label}</VisuallyHidden>
-		</>
+		<Tooltip text={icon.label}>
+			<div>
+				<StyledIconButton
+					selected={isChecked}
+					key={icon.name}
+					name={icon.name}
+					iconSet={icon.iconSet}
+				/>
+			</div>
+		</Tooltip>
 	);
 };