Blueprint: Tooltips display issue with overflow: hidden

[forman]

Bug report

• __Package version(s)__: @blueprintjs/[email protected]
• __Browser and OS versions__: Chromium (Electron) on Windows 10

Steps to reproduce

1. Use Tooltip (with dark theme, if this is important, I guess not)
2. Check its appearance
3. Agree that it could look better

Actual behavior

Top left and right edges of tooltip are not rounded, while bottom ones are. Bottom padding seems way to much:

Expected behavior

All edges rounded, or none. Text centered.

[forman]

The first CSS rule in my single-page app is the following

  /* Gets rid of any extra scrollbars added by the browser */

  * {
    overflow: hidden;
  }

If I comment that out, tooltips look as they should, i.e. as in the docs.

[adidahiya]

The first CSS rule in my single-page app is the following

... that is an overly general global rule. It doesn't seem worth it to write Blueprint component CSS in a way that is defensive against such global styling. Surely there are more specific selectors for your overflow: hidden rule which would solve your scrollbar issues?

[llorca]

A non-inline tooltip may solve your problem, but generally agree that * { overflow: hidden; } is gonna cause you some weird behavior eventually

[giladgray]

yeah that's a terrifying way to start your stylesheet and is guaranteed to cause problems with anything that relies on non-static positioning.

[forman]

Thanks guys for the hints!

Yepp, it's easy to see that I am a CSS beginner (and I'm not sure whether I will ever like it).