diff --git a/src/components/Select.jsx b/src/components/Select.jsx
index c3ba6a63b..123fe0122 100644
--- a/src/components/Select.jsx
+++ b/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,33 @@ 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 = (
);
+
+ return isPresent(tooltipProps) ? (
+
+ {optionComponent}
+
+ ) : (
+ optionComponent
+ );
};
const Placeholder = props => {
diff --git a/stories/Components/Select.stories.jsx b/stories/Components/Select.stories.jsx
index a78bc3cb8..6eebe02e9 100644
--- a/stories/Components/Select.stories.jsx
+++ b/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,
diff --git a/tests/Select.test.jsx b/tests/Select.test.jsx
index d237062d8..e46838dcf 100644
--- a/tests/Select.test.jsx
+++ b/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();
+
+ 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();
+ });
});