作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有三个选项卡,我需要在这些选项卡上悬停时放置一个工具提示,我正在使用引导选项卡。(它是一个 react 应用程序。)
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>
每当鼠标指针放置在选项卡标题上时,我需要出现一个工具提示,例如,当鼠标指针位于“托管”选项卡上时,我需要一个工具提示。这是选项卡
最佳答案
您可以使用 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
。
关于javascript - 如何为react-bootstrap选项卡组件放置工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60770136/
我是一名优秀的程序员,十分优秀!