Ant Design（Antd）中选择框长选项的适当工具提示

Question

我们有不同属性（标签/无标签，带/不带滚动条）的选择组件，现在我想在选项右侧添加一个工具提示，但是我不能使用Tooltip来包装Option，否则会导致错误。而且当标签模式开启时，工具提示将悬停在“勾选”图标上。

这是我在不使用内容div的固定宽度的情况下所能做到的最好效果。 https://codesandbox.io/s/busy-shirley-ss1or？

在我的应用程序中，我可以使用布尔值isTag来决定是否开启标签模式并增加内容div的宽度，但我无法知道是否应用了滚动条。我尝试获取下拉菜单或选项div的引用，但失败了。

我们不想使用“title”，因为工具提示看起来更好。 我们不想使用“dropdownMatchSelectWidth”，因为有些选项可能非常长。

- xinli

---

什么是问题？ - undefined

你似乎在你的codesandbox中达到了你设定的目标，对吗？ - undefined

现在工具提示与复选图标/滚动条/下拉菜单的右边框重叠。我希望确保工具提示始终浮动在下拉菜单的右侧（距离10像素），无论是否选择了标签，是否有滚动条等。 - undefined

嘿，你解决问题了吗？ - undefined

Answer 1

只需将 Option 元素的值包装在 Tooltip 元素中，像这样：

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

- Pedro Madrid