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.

Tooltip arrow does not get a border when a border as a tooltip prop

See original GitHub issue

Description

When I passed in the prop border to tooltip I would expect the arrow to also get this border. However, the arrow does get the border.

Link to Reproduction

https://codesandbox.io/s/dreamy-cori-ydedu?file=/src/App.js

Steps to reproduce

Hover over the tooltip and notice that the border is not around the tooltip arrow.

Chakra UI Version

1.6.10

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Reactions:7
Comments:10 (1 by maintainers)

Top GitHub Comments

2reactions

josulliv101commented, Jan 18, 2022

Seems the “–popper-arrow-shadow-color” css var is not being found. Not a fix but defining that var in the sx property got the border on the tooltip arrow displaying – as a work-around at least (see example). https://codesandbox.io/s/stupefied-fire-s36kz?file=/src/App.js

1reaction

Tenkircommented, Sep 11, 2022

This is the same root cause as https://github.com/chakra-ui/chakra-ui/issues/5934

As @CalvinChhour mentioned, I have had a PR open for sometime here, just needs review from a maintainer. I can make some tweaks so it also resolves this issue.

Top Results From Across the Web

CSS tooltip with arrow and border [duplicate] - Stack Overflow

The goal is here to have a plain white tooltip, with 1px wide border. Even if similar look to some other, it's not...

Top Tooltip w/ Bottom Arrow - W3Schools Tryit Editor

border -bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center;

How to Fancy tooltip customization in React Tooltip component

The arrow of the tooltip can be customized as needed by customizing CSS in the sample-side. ... .e-arrow-tip-outer.e-tip-top { border-left: none !important; ...

Themes | Tippy.js

Themes. Tippies can have any custom styling via CSS. #Included themes. The package comes with themes for you to use: light; light-border; material ......

Documentation: DevExtreme - JavaScript Sankey Tooltip

Specifies the length of a tooltip's arrow in pixels. ... Configures a tooltip's border. ... Make sure that it does not contain malicious...