Tooltip custom variant with prop bg does not color the arrow

[arbejd]

Description

When i make a custom tooltip Variant i expect the arrow to also be colored with the bg style prop

Link to Reproduction

https://codesandbox.io/s/long-frost-9m4rm

Steps to reproduce

make a custom variant
assign to a tooltip
mouseover the tooltip

Chakra UI Version

latest

Browser

Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

It works when you set the bg directly

[anubra266]

@arbejd, your reproduction is just a fresh chakra UI sandbox

[segunadebayo]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem.

Please follow the issue template as we're not able to act on issues that are lacking important information.

[arbejd]

Dont know why i didnt save it. I remade the repo here:

https://codesandbox.io/s/9m4rm?file=/src/index.js

[arbejd]

@segunadebayo is this sufficient to reopen?

[randex]

While these guys play bureaucracy:

If anybody googles their way here when having the same problem (like me): define a css var popper-arrow-bg and set it to your color with colors. prefix at the start.

const $arrowBg = cssVar("popper-arrow-bg");
export default {
  baseStyle: {
    // ... other styles
    [$arrowBg.variable]: "colors.red.500",
  },
};

But the better way is to use cssVar to set both the background color and arrow color. Use the same approach as in the default tooltip theme.

[fritzschoff]

Well done! Shame that nothing is written in the docs about that

[Digital-Human-BK]

The problem still persists! Thanks to @randex. I hope this issue will be fixed...

[bj-nostra]

Broken.

I added hasArrow to the docs example and we get this nice black diamond for the blue colorScheme.

The issue appears to be that the tooltip itself is checking if there is a userDefinedBg user defined background coming in on props, and it ignores the theme extension mechanisms.

[acron0]

This needs to be reopened

[TiagoJeronimo]

@segunadebayo would it be possible to reopen this issue?