我在 Material-UI 中有一个选项卡组件，我想在其上实现一个工具提示。我的问题是，当我单击选项卡组件时，工具提示并没有消失。我单击该选项卡后它必须消失。目前，即使我单击该选项卡，它仍然可见。我该如何纠正这个问题？<Tabs className="navbar-routes" value={value} style={{ color: 'green'}} indicatorColor="secondary" onChange={handleChange} > { tabsData.map(({id,title,description}) => { return( <ToolTip description={description}> <Tab style={{ minWidth: 10, fontSize: '80%', fontWeight: 'bold', marginLeft: '-4px', marginRight: 4 }} key={id} component={Link} to={`/${title}`} label={`${title}`} /> </ToolTip> ); } )} </Tabs>
3 回答
幕布斯7119047
TA贡献1794条经验 获得超8个赞
如果你查看Material-UI tooltip API的文档
你会发现一个名为disableHoverListener的道具
bool
默认值： false
不响应悬停事件。
将其设置为True关闭工具提示 onMouseOver 事件触发器。
或者你可以简单地让它完全处于控制之中。
通过将onClick、onMouseOver、onMouseLeave、绑定open到相关组件。
import React, { useState } from "react";
import "./styles.css";
import { Tooltip, Tab } from "@material-ui/core";
export default function App() {
const [flg, setFlg] = useState(false);
const [isHover, setIsHover] = useState(false);
return (
<div className="App">
<Tooltip
title={"message"}
aria-label="add"
placement="bottom"
open={!flg && isHover}
>
<Tab
label={`Click: ${!flg ? "enabled" : "disabled"}`}
onClick={() => setFlg(!flg)}
onMouseOver={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
/>
</Tooltip>
</div>
);
}
ITMISS
TA贡献1871条经验 获得超8个赞
您还可以实现通用工具提示，并在打开/关闭工具提示时具有托管状态。
import Tooltip, { TooltipProps } from "@mui/material/Tooltip";
import { useState } from "react";
/**
* MUI Tooltip wrapper with adaption to the move away once focuses left.
*/
export function ManagedTooltip(props: TooltipProps) {
const [open, setOpen] = useState<boolean>(false);
// Wrap Tooltip with div to capture mouse events
return <div style={{ display: 'flex' }}
onMouseEnter={() => setOpen(true)}
onMouseLeave={() => setOpen(false)}
onClick={() => setOpen(false)}
>
{/* Show the original MUI Tooltip with all props. */}
{/* Just override the open attribute to be fully managed, and disable internal listeners */}
<Tooltip {...props} open={open} disableHoverListener disableFocusListener />
</div>;
}
一旦准备就绪，您就可以在任何地方使用它，就像原始的 MUI 工具提示一样。
<Tabs
className="navbar-routes"
value={value}
style={{ color: 'green'}}
indicatorColor="secondary"
onChange={handleChange}
>
{
tabsData.map(({id,title,description}) => {
return(
<ManagedTooltip description={description}>
<Tab
style={{
minWidth: 10,
fontSize: '80%',
fontWeight: 'bold',
marginLeft: '-4px',
marginRight: 4
}}
key={id}
component={Link}
to={`/${title}`}
label={`${title}`}
/>
</ManagedTooltip>
);
}
)}
</Tabs>
慕莱坞森
TA贡献1810条经验 获得超4个赞
我解决这个问题的方法是有条件地渲染工具提示。在您的情况下，我想您希望工具提示不呈现当前活动路线的选项卡：
function ConditionalTooltip({renderTooltip, children, ...props}) {
return renderTooltip ? <Tooltip {...props}>{children}</Tooltip> : children;
}
function Tabs() {
const location = useLocation();
return (
<Tabs
className="navbar-routes"
value={value}
style={{ color: 'green'}}
indicatorColor="secondary"
onChange={handleChange}
>
{
tabsData.map(({id,title,description}) => {
return(
<ConditionalTooltip
renderTooltip={location.pathname.indexOf(title) === -1} /* only render tooltip on not active urls */
title={description}
>
<Tab
style={{
minWidth: 10,
fontSize: '80%',
fontWeight: 'bold',
marginLeft: '-4px',
marginRight: 4
}}
key={id}
component={Link}
to={`/${title}`}
label={`${title}`}
/>
</ConditionalTooltip>
);
}
)}
</Tabs>
)
}
- 3 回答
- 0 关注
- 81 浏览
添加回答
举报
0/150
提交
取消