问题描述
我有三个选项卡,我需要在这些选项卡上的悬停位置放置工具提示,我正在使用引导程序选项卡.(它是一个React应用程序.)
I have three tabs , I need to place a tool tip on hover on those tabs,I am using bootstrap tabs.(Its a react application.)
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>
每当将鼠标指针放在选项卡页眉上时,我都需要一个工具提示,例如,当鼠标指针位于托管"选项卡上时,我需要一个工具提示.这是标签
I need a tool tip appear whenever the Mouse pointer is placed on the Tab Header, for example I need a tooltip when the mouse pointer is on Managed tab .Here are the tabs
推荐答案
您可以使用 TabContainer
和 OverlayTrigger
在顶部显示工具提示,
you can use TabContainer
along with OverlayTrigger
to show a tooltip on top,
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
.
this is just an example, you can modify the TabContainer
and TooltipTopNavItem
based on your use-case.
这篇关于如何为react-bootstrap选项卡组件放置工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!