如何为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}) => {

  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>

  )

}

并在 中使用上面的自定义组件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>

这只是一个示例，您可以根据您的用例修改TabContainer和。TooltipTopNavItem