javascript - 如何为 react-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>
每当鼠标指针放在选项卡标题上时,我都需要一个工具提示,例如,当鼠标指针位于 Managed tab 上时,我需要一个工具提示。这里是标签
解决方案
您可以使用TabContainer
withOverlayTrigger
在顶部显示工具提示,
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
and 。TooltipTopNavItem
推荐阅读
- android - 如何避免音频流在 5 分钟后停止?
- graph - Tableau 中的值分组
- c# - 无法将字符串作为 HTTPContent 发送
- python - 使用 Pandas 将 SQL 导出到 Excel,如何进行下拉?
- swift - Swift:有没有更好的方法将数据添加到作为函数参数的字典中?
- netlogo - 积分方程:对 Cobb-Douglas 技术最终产品生产函数建模
- python - 如何在python中启用pip?
- angular - 如何以角度测试属于另一个服务的可观察对象
- excel - 使用 VBA 更新数据透视表过滤器
- php - 错误:Dockerfile 解析错误第 4 行:未知指令:PHP7