proper tooltip for long Options of Select in Ant Design (Antd)

Question

We have Select components of different props (tag/no tags, with/without scrollbars), now I want to add a tooltip to the right of the options, but I can not use Tooltip to wrap around Option which will cause errors. And when tags mode is on, the Tooltip will hover over the 'check' icon.

This is the best I can do without using fixed width of content divs. https://codesandbox.io/s/busy-shirley-ss1or?

In my application I can use a boolean isTag to decide is tag mode is on and increment the width of content div, but I can not know whether the scrollbar is applied. I tried to get the ref of the dropdown menu or option div but failed.

We don't want to use 'title' because tooltip looks way better. We don't want to use 'dropdownMatchSelectWidth' because some options could be super long.

Answer 1

Just wrap the value of the Option element in a Tooltip element, like this:

<Option value={value} key={key}>
  <Tooltip title="tooltip">
    {option}
  </Tooltip>
</Option>