Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MenuItem 的 Label 中使用 Tooltip 不生效 #48934

Open
Yawenina opened this issue May 15, 2024 · 2 comments
Open

MenuItem 的 Label 中使用 Tooltip 不生效 #48934

Yawenina opened this issue May 15, 2024 · 2 comments

Comments

@Yawenina
Copy link
Contributor

Yawenina commented May 15, 2024

Reproduction link

https://react-5tpyk5.stackblitz.io

Steps to reproduce

hover 到 “有Before” 菜单时,没有 tooltip 提示;
hover 到 “没有Before” 菜单时,有 tooltip 提示;

What is expected?

不需要单独配置 css 样式,让 tooltip 生效

What is actually happening?

需要单独配置 css 样式,让 tooltip 生效

Environment Info
antd 5.17.2
React 18.3.1
System Mac
Browser Chrome

antd 内部,会给 menu-item a 加上::before 的样式的蒙层,导致 hover 时,无法选中 tooltip 中的 trigger, 就不会触发 tooltip 提示。
当去掉这个 ::before 样式,则 tooltip 生效
image

====== 题外话
不知道加这个样式的出发点是什么,但是在结合 ProLayout 一起使用的时候,如果通过在项目中加 css 来解决这个问题,
在 ProLayout 中又会出现:点击一个链接,打开 2个窗口的问题,这个是 demo
这个原因是 ProLayout 内部会给 http 的链接绑定跳转事件(ProLayout 代码),当在这个外层包一个 a 标签时,由于 antd menu 的样式,不会有打开 2 个窗口的问题。但是为了解决 tooltip 的问题,一旦把a::before 的样式去掉,则会打开 2 个窗口。

Copy link

stackblitz bot commented May 15, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@MadCcc
Copy link
Member

MadCcc commented May 15, 2024

需要添加 renderItem 属性

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants