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,

constTooltipTopNavItem = ({title, tooltipMessage, eventKey}) => {
  return (
    <OverlayTriggerkey={`${eventKey}-top`}
      placement={'top'}
      overlay={
        <Tooltipid={`tooltip-top`}>
         {tooltipMessage}
        </Tooltip>
      }
  >
    <Nav.Item><Nav.LinkeventKey={eventKey}>{title}</Nav.Link></Nav.Item></OverlayTrigger>
  )
}

and use the above custom component in the TabContainer,

<Tab.Containerid="tabs-example"activeKey={key}><Row><Colsm={3}><Navvariant="pills"className="flex-column"><TooltipTopNavItemtitle={'Managed'} tooltipMessage={'Managedtooltip'} eventKey={"managed"} /><TooltipTopNavItemtitle={'Unmanaged'} tooltipMessage={'Unmanagedtooltip'} eventKey={"unmanaged"} /><TooltipTopNavItemtitle={'Source'} tooltipMessage={'Sourcetooltip'} eventKey={"source"} /></Nav></Col><Colsm={9}><Tab.Content><Tab.PaneeventKey="managed">
           In managed tab
        </Tab.Pane><Tab.PaneeventKey="unmanaged">
          In Unmanaged tab
        </Tab.Pane><Tab.PaneeventKey="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.