reactjs - 如何在蚂蚁设计选项卡上添加工具提示？

Question

我有这段代码，我想在标签道具上做的是在图标上添加工具提示：

<Tabs.TabPane tab={<Tooltip placement="left" title="adasd"><Icon size="1.2" name="cog" /></Tooltip>} key="map">
  <MapProperties onChange={onChange} canvasRef={canvasRef} />
</Tabs.TabPane>

我期待悬停显示，但它不工作。是否可以在选项卡窗格上添加 ant 设计工具提示？

标签： reactjsantd

Answer 1

Anuj's answer isn't correct since TabPane should be direct children of Tabs component. I also had such problem and I find out that i can solve it like this:

<TabPane
  key="3"
  tab={(
    <Tooltip title="Your hint that appears after user's mouse will be over the tab title">
       <span>tab title</span>
    </Tooltip>
  )}
  disabled={mode === PageMode.NEW}
>

tab attribute accepts any ReactNode so we can just wrap our tab name with any component. And tooltip isn't exception.

Proof that this works