Add tooltip support to custom select options in Select component

src/components/Select.jsx

@@ -15,6 +15,7 @@ import { hyphenize } from "utils";
 
 import Label from "./Label";
 import Spinner from "./Spinner";
+import Tooltip from "./Tooltip";
 
 const SIZES = { small: "small", medium: "medium", large: "large" };
 
@@ -75,22 +76,41 @@ const CustomInput = props => {
 
 const CustomOption = props => {
   const ref = useRef();
-  const { dataCy } = props.data;
+  const {
+    innerProps,
+    data: { dataCy, tooltipProps = {} },
+  } = props;
 
   useEffect(() => {
     props.isSelected && ref.current.scrollIntoView();
   }, [props.isSelected]);
 
-  return (
+  const optionComponent = (
     <components.Option
       {...props}
       innerRef={ref}
       innerProps={{
-        ...props.innerProps,
+        ...innerProps,
         "data-cy": dataCy || `${hyphenize(props.label)}-select-option`,
       }}
     />
   );
+
+  if (isPresent(tooltipProps)) {
+    const mergedTooltipProps = {
+      zIndex: 1_000_001,
+      position: "bottom-start",
+      ...tooltipProps,
+    };
+
+    return (
+      <Tooltip {...mergedTooltipProps}>
+        <div>{optionComponent}</div>
+      </Tooltip>
+    );
+  }
+
+  return optionComponent;
 };
 
 const Placeholder = props => {

stories/Components/Select.stories.jsx

@@ -162,6 +162,30 @@ Grouped.args = {
   ],
 };
 
+const OptionWithTooltip = Template.bind({});
+OptionWithTooltip.storyName = "Option with Tooltip";
+OptionWithTooltip.args = {
+  label: "Select with Tooltips",
+  placeholder: "Hover any option",
+  strategy: "fixed",
+  options: OPTIONS.map(option => ({
+    value: option.value,
+    label: option.label,
+    tooltipProps: {
+      position: "top-start",
+      content: `Tooltip content for ${option.label}`,
+    },
+  })),
+};
+
+OptionWithTooltip.parameters = {
+  docs: {
+    description: {
+      story: `Use the \`tooltipProps\` field on each option to show a tooltip when hovering.`,
+    },
+  },
+};
+
 const Creatable = args => {
   const [options, setOptions] = useState([
     { value: "value1", label: "Value one" },
@@ -560,6 +584,7 @@ export {
   Sizes,
   MultiSelect,
   Grouped,
+  OptionWithTooltip,
   Creatable,
   AsyncCreatable,
   Searchable,

tests/Select.test.jsx

@@ -331,4 +331,24 @@ describe("Select", () => {
       "group2-option1"
     );
   });
+
+  it("should show tooltip when hovering over an option with tooltipProps", async () => {
+    const tooltipText = "Tooltip content";
+    const optionsWithTooltip = [
+      {
+        label: "Option 1",
+        value: "option-1",
+        tooltipProps: { content: tooltipText },
+      },
+    ];
+
+    render(<Select label="Select" options={optionsWithTooltip} />);
+
+    const select = screen.getByRole("combobox");
+    await userEvent.click(select);
+    const option = screen.getByText("Option 1");
+    await userEvent.hover(option);
+
+    expect(await screen.findByText(tooltipText)).toBeInTheDocument();
+  });
 });