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,18 +76,34 @@ const CustomInput = props => {
 
 const CustomOption = props => {
   const ref = useRef();
-  const { dataCy } = props.data;
+  const {
+    innerProps,
+    data: { dataCy, tooltipContent = "" },
+  } = props;
 
   useEffect(() => {
     props.isSelected && ref.current.scrollIntoView();
   }, [props.isSelected]);
 
+  if (tooltipContent) {
+    return (
+      <Tooltip content={tooltipContent}>
+        <div
+          {...{ ref, ...innerProps }}
+          data-cy={dataCy || `${hyphenize(props.label)}-select-option`}
+        >
+          <components.Option {...props} />
+        </div>
+      </Tooltip>
+    );
+  }
+
   return (
     <components.Option
       {...props}
       innerRef={ref}
       innerProps={{
-        ...props.innerProps,
+        ...innerProps,
         "data-cy": dataCy || `${hyphenize(props.label)}-select-option`,
       }}
     />

tests/Select.test.jsx

@@ -331,4 +331,20 @@ describe("Select", () => {
       "group2-option1"
     );
   });
+
+  it("should show tooltip when hovering over an option with tooltipContent", async () => {
+    const tooltipText = "Tooltip content";
+    const optionsWithTooltip = [
+      { label: "Option 1", value: "option-1", tooltipContent: 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();
+  });
 });