Overlay text for OfficeUI fabric PivotItem

Question

is it possible to add an overlay when individual buttons in a Pivot are moused over?

For example, when I hover my mouse over the Search icon I want to display overlay text saying "search". I have tried to use the OverlayTrigger from react-bootstrap, but if the PivotItem tag is surrounded, it will not display in the Pivot. I also tried the onMouseEnter function in the PivotItem tag, but this is called when the component shown by this pivot is moused over, not the icon in the Pivot.

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

any ideas?

      // 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

If possible, strongly consider not using tooltips and instead make the pivot headers themselves descriptive. Tooltips are not discoverable and don't work well for touchscreen users.

That said, this is possible by defining onRenderItemLink in each PivotItem like the following example:

    <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>