Как разместить всплывающую подсказку для компонента реагирования bootstrap - PullRequest
Новая
       34

Как разместить всплывающую подсказку для компонента реагирования bootstrap

0 голосов
/ 20 марта 2020

У меня есть три вкладки, мне нужно поместить всплывающую подсказку на эти вкладки, я использую вкладки bootstrap. (Это приложение реагирует.) 

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>

Мне нужна подсказка появляются всякий раз, когда указатель мыши находится на заголовке вкладки, например, мне нужна всплывающая подсказка, когда указатель мыши находится на вкладке «Управляемый». Вот вкладки enter image description here

1 Ответ

1 голос
/ 20 марта 2020

вы можете использовать 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 в зависимости от вашего варианта использования.

...