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

【问题标题】：How to place a tooltip for the react-bootstrap tab component如何为 react-bootstrap 选项卡组件放置工具提示
【发布时间】：2020-07-01 08:28:21
【问题描述】：

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

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>

每当鼠标指针放在选项卡标题上时，我都需要一个工具提示，例如，当鼠标指针位于 Managed tab 时，我需要一个工具提示。这里是标签

【问题讨论】：

是的，请，我在这里有点困惑。

标签： javascript html reactjs bootstrap-4 react-bootstrap

【解决方案1】：

您可以使用TabContainer 和OverlayTrigger 在顶部显示工具提示，

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。

【讨论】：