如何为react-bootstrap选项卡组件放置工具提示

Question

我有三个选项卡，我需要在这些选项卡上悬停时放置一个工具提示，我正在使用引导选项卡。（它是一个反应应用程序。）

import { Tabs,Tab} from "react-bootstrap";

// inside return

 <Tabs

      variant="pills"

      className="mb-3"

      activeKey={key}

     >

        <Tab eventKey="managed" title="Managed" Tooltip="hello"/>

        <Tab eventKey="unmanaged" title="Unmanaged"/>

        <Tab eventKey="source" title="Source"/>

</Tabs>

每当鼠标指针放置在选项卡标题上时，我需要出现一个工具提示，例如，当鼠标指针位于“托管”选项卡上时，我需要一个工具提示。这是选项卡

Answer 1

您可以使用TabContainerwithOverlayTrigger在顶部显示工具提示，const TooltipTopNavItem = ({title, tooltipMessage, eventKey}) => {&nbsp; return (&nbsp; &nbsp; <OverlayTrigger&nbsp; &nbsp; &nbsp; key={`${eventKey}-top`}&nbsp; &nbsp; &nbsp; placement={'top'}&nbsp; &nbsp; &nbsp; overlay={&nbsp; &nbsp; &nbsp; &nbsp; <Tooltip id={`tooltip-top`}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{tooltipMessage}&nbsp; &nbsp; &nbsp; &nbsp; </Tooltip>&nbsp; &nbsp; &nbsp; }&nbsp; >&nbsp; &nbsp; <Nav.Item>&nbsp; &nbsp; &nbsp; <Nav.Link eventKey={eventKey}>{title}</Nav.Link>&nbsp; &nbsp; </Nav.Item>&nbsp; </OverlayTrigger>&nbsp; )}并在 中使用上面的自定义组件TabContainer，<Tab.Container id="tabs-example" activeKey={key}>&nbsp; <Row>&nbsp; &nbsp; <Col sm={3}>&nbsp; &nbsp; &nbsp; <Nav variant="pills" className="flex-column">&nbsp; &nbsp; &nbsp; &nbsp; <TooltipTopNavItem title={'Managed'} tooltipMessage={'Managed tooltip'} eventKey={"managed"} />&nbsp; &nbsp; &nbsp; &nbsp; <TooltipTopNavItem title={'Unmanaged'} tooltipMessage={'Unmanaged tooltip'} eventKey={"unmanaged"} />&nbsp; &nbsp; &nbsp; &nbsp; <TooltipTopNavItem title={'Source'} tooltipMessage={'Source tooltip'} eventKey={"source"} />&nbsp; &nbsp; &nbsp; </Nav>&nbsp; &nbsp; </Col>&nbsp; &nbsp; <Col sm={9}>&nbsp; &nbsp; &nbsp; <Tab.Content>&nbsp; &nbsp; &nbsp; &nbsp; <Tab.Pane eventKey="managed">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;In managed tab&nbsp; &nbsp; &nbsp; &nbsp; </Tab.Pane>&nbsp; &nbsp; &nbsp; &nbsp; <Tab.Pane eventKey="unmanaged">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; In Unmanaged tab&nbsp; &nbsp; &nbsp; &nbsp; </Tab.Pane>&nbsp; &nbsp; &nbsp; &nbsp; <Tab.Pane eventKey="source">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; In source tab&nbsp; &nbsp; &nbsp; &nbsp; </Tab.Pane>&nbsp; &nbsp; &nbsp; </Tab.Content>&nbsp; &nbsp; </Col>&nbsp; </Row></Tab.Container>这只是一个示例，您可以根据您的用例修改TabContainer和。TooltipTopNavItem