How To Place A Tooltip For The React-bootstrap Tab Component

I have three tabs , I need to place a tool tip on hover on those tabs,I am using bootstrap tabs.(Its a react application.) import { Tabs,Tab} from 'react-bootstrap'; // inside retu

Solution 1:

you can use TabContainer along with OverlayTrigger to show a tooltip on top,

const TooltipTopNavItem = ({title, tooltipMessage, eventKey}) => {
  return (
    <OverlayTrigger
      key={`${eventKey}-top`}
      placement={'top'}
      overlay={
        <Tooltip id={`tooltip-top`}>
         {tooltipMessage}
        </Tooltip>
      }
  >
    <Nav.Item>
      <Nav.Link eventKey={eventKey}>{title}</Nav.Link>
    </Nav.Item>
  </OverlayTrigger>
  )
}

and use the above custom component in the TabContainer,

<Tab.Container id="tabs-example" activeKey={key}>
  <Row>
    <Col sm={3}>
      <Nav variant="pills" className="flex-column">
        <TooltipTopNavItem title={'Managed'} tooltipMessage={'Managed tooltip'} eventKey={"managed"} />
        <TooltipTopNavItem title={'Unmanaged'} tooltipMessage={'Unmanaged tooltip'} eventKey={"unmanaged"} />
        <TooltipTopNavItem title={'Source'} tooltipMessage={'Source tooltip'} eventKey={"source"} />
      </Nav>
    </Col>
    <Col sm={9}>
      <Tab.Content>
        <Tab.Pane eventKey="managed">
           In managed tab
        </Tab.Pane>
        <Tab.Pane eventKey="unmanaged">
          In Unmanaged tab
        </Tab.Pane>
        <Tab.Pane eventKey="source">
          In source tab
        </Tab.Pane>
      </Tab.Content>
    </Col>
  </Row>
</Tab.Container>

this is just an example, you can modify the TabContainer and TooltipTopNavItem based on your use-case.