cschroeter / park-ui

Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.
https://park-ui.com
MIT License
1.75k stars 75 forks source link

Tooltip arrow not visible #411

Open wagnerpaz opened 3 months ago

wagnerpaz commented 3 months ago
<Tooltip.Root closeDelay={0} openDelay={0}>
  <Tooltip.Trigger asChild>
    <Info />
  </Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Content>
      <Tooltip.Arrow>
        <Tooltip.ArrowTip />
      </Tooltip.Arrow>
      I am a tooltip!
    </Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

there are two undefined CSS variables. If I provide a value it works

:root {
  --arrow-size: 8px;
  --arrow-background: #fff;
}
allenhartwig commented 3 months ago

While populating those variable values does make the arrow visible, it is not an ideal rendering, as the default style of the Park UI tooltip content background is gray.a12, which creates an onion skin effect.

Ideally the arrow tip would be a properly placed triangle instead of a rotated square that's partially masked using z-index so that alpha channels could be used for the background colors, however, I imagine this would be a concern of Ark UI, not Park UI.

bohdanbirdie commented 1 month ago

There are few more variables that missing: CleanShot 2024-10-09 at 18 20 14

bohdanbirdie commented 1 month ago

CleanShot 2024-10-09 at 18 29 46@2x

CleanShot 2024-10-09 at 18 30 02@2x

Looks like docs are wrong on ParkUI page too