Tooltip CSS properties

[mirkocutri]

Hi,
Is there a property to set the color for the tooltip border? In the component description there is any information related to it. Trying do set it like in other components doesn't work.

I tried this:
style='--background-color: #07575C; --border-color: #FFFFFF;'

Furthermore, the --background-color property is coloring the background but not the arrow. Is there an additional property? Can't find this information.

Thanks

[KonnorRogers]

It's a little confusing right now, but technically the arrow lives separately from the tooltip due to how the library we use calculates the arrow.

this should work:

wa-tooltip::part(base__arrow) {
  background-color: red;
}

wa-tooltip {
  --background-color: red;
}

https://codepen.io/paramagicdev/pen/poMMxbW?editors=1000

I don't particularly love base__arrow I'll see if we can change that to just ::part(arrow)

and for this background color CSS var combine it for the arrow and the tooltip itself so that --background-color behaves as expected. Thanks for the issue!!

@LeaVerou @claviska

[mirkocutri]

Thanks @KonnorRogers .

This works great!!
Just one more question related to the tooltip border line color. Is there a way to color it?