[Tooltip] Change `disableInteractive` default value
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
After a tooltip is shown, moving the mouse cursor over the tooltip keeps it open indefinitely. It is hidden only when the mouse cursor is moved outside it.
Expected behavior 🤔
The tooltip should close as soon as the mouse moves outside the main element. This is illustrated in the Material Design guidelines: Also, the statement “Continuously display the tooltip as long as the user long-presses or hovers over the element.” implies that when this is no longer the case the tooltip should disappear.
See other Material Design implementations for comparison, e.g. Vue/Quasar), does it correctly:
Steps to reproduce 🕹
To reproduce:
- Go to the built-in example).
- Move the mouse cursor over the IconButton: The tooltip is shown.
- Move the mouse cursor outside the IconButton and over the tooltip. The tooltip is still shown. It is hidden only when the mouse cursor is moved outside it.
Context 🔦
Any context / all uses.
Your environment 🌎
`npx @mui/envinfo`
``` Browser: MS Edge v. 97.0.1072.69, 64 bits System: OS: Windows 10 10.0.19042 Binaries: Node: 14.15.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 97.0.4692.99 Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.69) npmPackages: @emotion/react: ^11.7.1 => 11.7.1 @emotion/styled: ^11.6.0 => 11.6.0 @mui/base: 5.0.0-alpha.66 @mui/material: ^5.3.1 => 5.3.1 @mui/private-theming: 5.3.0 @mui/styled-engine: 5.3.0 @mui/system: 5.3.0 @mui/types: 7.1.0 @mui/utils: 5.3.0 @types/react: ^17.0.38 => 17.0.38 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 ```Issue Analytics
- State:
- Created 2 years ago
- Reactions:3
- Comments:14 (7 by maintainers)
Top Results From Across the Web
Tooltips - Bootstrap
Tooltips for .disabled or disabled elements must be triggered on a wrapper ... The tooltip plugin generates content and markup on demand, and...
Read more >How to enable Bootstrap tooltip on disabled button
By default tooltips is initialized by selecting the specified element and call the tooltip() method using jQuery. · To position the tooltip data- ......
Read more >How to enable Bootstrap tooltip on disabled button?
Disabled elements Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip ...
Read more >Solved: Remove default tooltip - Microsoft Power BI Community
Solved: Hello All, I have added tooltip fields fo the visual/graph. But when I hover on the stack of bars, it showing me...
Read more >Tooltip - Chart.js
To change the overrides for those chart types, the options are defined in Chart.overrides[type].plugins.tooltip . Name, Type, Default ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi, OP here. Thanks all for the responses and the workaround, although I can’t test anything because I’m on vacation now. I’ll comment further when I’m back. Cheers
@ggascoigne As far as I can tell, this issue is about
interactive
/disableInteractive
which isn’t related to the accessible name/accessible description. So if there’s an issue withdescribeChild
, I would recommend opening a separate issue.