reactjs - OfficeUI 结构 PivotItem 的叠加文本

Question

将鼠标悬停在 Pivot 中的各个按钮上时是否可以添加叠加层？

例如，当我将鼠标悬停在“搜索”图标上时，我想显示覆盖文字“搜索”。我曾尝试使用 react-bootstrap 中的 OverlayTrigger，但如果 PivotItem 标签被包围，它将不会显示在 Pivot 中。我还尝试了 PivotItem 标记中的 onMouseEnter 函数，但是当鼠标悬停在此枢轴显示的组件而不是枢轴中的图标时会调用该函数。

<Pivot>
      <OverlayTrigger
        placement={'bottom'}
        overlay={
          <Tooltip>
            My overlay text
            </Tooltip>
        }>
          <PivotItem itemIcon="Search">  // this pivot will not show up 
            <Search />
          </PivotItem>
      </OverlayTrigger>
</Pivot>

有任何想法吗？

      // onMouseEnter will be called with <Search /> is moused over, not the search icon
      <PivotItem itemIcon="Search" onMouseEnter={() => console.log("moused over")} >
        <Search />
      </PivotItem>

Answer 1

如果可能，强烈考虑不使用工具提示，而是让数据透视表头本身具有描述性。工具提示是不可发现的，并且不适用于触摸屏用户。

也就是说，这可以通过onRenderItemLink在每个中定义，PivotItem如下例所示：

    <Pivot aria-label="Basic Pivot Example">
      <PivotItem onRenderItemLink={() => <TooltipHost content="This is the tooltip content">some text</TooltipHost>}>
        lorem ipsum
      </PivotItem>
      <PivotItem headerText="Recent">
        lorem ipsum
      </PivotItem>
    </Pivot>