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.
Post a Comment for "How To Place A Tooltip For The React-bootstrap Tab Component"