question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Interactive tooltip not closing consistently on click across different browsers

See original GitHub issue

Tooltip not closing when clicking a button within tooltip on Chrome

React tooltip

  • carbon-components
  • carbon-components-react

Detailed description

The tooltip is not closing when I click the button within the tooltip on Chrome. It does close (as expected?) on Firefox.

I think the behavior should be consistent across browsers. I assume it is supposed to close.

Tested on FF, Chrome

carbondesignsystem version: whatever is leveraged here currently https://react.carbondesignsystem.com

Steps to reproduce the issue

  1. Navigate here https://react.carbondesignsystem.com/?path=/story/tooltip--default-bottom
  2. Open tooltbox
  3. Click “Create” button
  4. should do the same on Firefox and Chrome.

Not sure about the expectation. I think in the past clicking the button closed the tooltip window. This behavior stopped recently on Chrome.

Additional information

  • Try to click the button (red rectangle in screen shot)

image

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
Daniel-Schulz-Privatecommented, Feb 20, 2020

I see. Thank you for the fast response!

0reactions
asudohcommented, Feb 20, 2020

what is the expected behavior? That the tooltip stays open?

Yes.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Boostrap tooltip interaction and automatic hiding
Once this is the case, close the currently visible tooltip. Show the another tooltip mouseenter (span) and only if no other tooltip is...
Read more >
Building a simple tooltip component that never goes off screen
How to build a simple, responsive and lightweight tooltip web component, with minimal HTML, CSS and JavaScript and no framework dependency.
Read more >
Thinking on ways to solve TOOLTIPS - YouTube
In today's GUI Challenge, @AdamArgyleInk builds a tooltip with a custom element (no web component!), :has(), transforms, and logical ...
Read more >
ARIA: tooltip role - Accessibility - MDN Web Docs - Mozilla
Tooltips provide contextual information about an element when that owning element receives focus or is hovered over, but is otherwise not ...
Read more >
Tooltips in the time of WCAG 2.1 | Sarah Higley
Allow a mouse or pointer user to hide the tooltip, ideally through a close button (unless the tooltip will never overlap other content)....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found