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.

Icon only Button tooltip has a gap

See original GitHub issue

What package(s) are you using?

carbon-components - 10.12.0
carbon-components-react - 7.12.0

Detailed description

Icon only Button tooltip has a gap between the triangular tip and the rectangular body.
tooltip has a gap2 I can see this issue in the carbon components storybook itself. OS - Windows Browsers - Chrome 84.0.4147.135, Firefox 78.2.0esr (Needs 110% zoom), Edge 84.0.522.63

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

tw15egancommented, Sep 8, 2020

I mean, it is still working properly, there is just a 1px artifact at different zoom levels. It doesn’t seem to be affecting the readability of the actual message.

If anyone has a fix to prevent this from happening on different zoom levels we’d happily accept a PR.

0reactions

mzuliani-ibmcommented, Sep 8, 2020

As a counter-argument, for accessibility reasons, shouldn’t the UI work properly regardless of browser magnification or OS text magnification?

Top Results From Across the Web

icon only button, two tooltips visible and overlapping ... - GitHub

Hover over button two - both tooltips visible and in most cases overlaps since buttons are 48px size. I think tooltip for focused...

Bootstrap's tooltip doesn't disappear after button click ...

I have looked into the manual - Bootstrap's tooltip and if I'm clicking on the buttons, I see the same problem. Is there...

Tooltip class - material library - Flutter - Dart API docs

Many widgets, such as IconButton, FloatingActionButton, and PopupMenuButton have a tooltip property that, when non-null, causes the widget to include a Tooltip ......

Tooltips - Bootstrap

Tooltips must be hidden before their corresponding elements have been removed from the DOM. Tooltips can be triggered thanks to an element inside...

How to enable Bootstrap tooltip on disabled button

Use the following approaches to enable a tooltip on disabled-buttons. Using jQuery; Using HTML; Using CSS. Initializing tooltip:.