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(