[英]How to place a tooltip for the react-bootstrap tab component
我有三個選項卡,我需要在這些選項卡上懸停時放置一個工具提示,我正在使用引導選項卡。(它是一個反應應用程序。)
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>
每當鼠標指針放在 Tab Header 上時,我都需要一個工具提示,例如,當鼠標指針位於 Managed tab 上時,我需要一個工具提示。 這是選項卡
您可以使用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
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.