我有三個選項卡，我需要在這些選項卡上懸停時放置一個工具提示，我正在使用引導選項卡。（它是一個反應應用程序。）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>每當鼠標指針放置在選項卡標題上時，我需要出現(xiàn)一個工具提示，例如，當鼠標指針位于“托管”選項卡上時，我需要一個工具提示。這是選項卡
1 回答
蠱毒傳說
TA貢獻1895條經(jīng)驗 獲得超3個贊
您可以使用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>
這只是一個示例，您可以根據(jù)您的用例修改TabContainer和。TooltipTopNavItem
- 1 回答
- 0 關注
- 115 瀏覽
添加回答
舉報
0/150
提交
取消