Colorize Tooltip.Arrow

[Ronan-V]

Hello,

I'm trying to figure out how to colorize the arrow of a Tooltip (Tooltip.Arrow).
I tried to use the background color but it doesn't do what I expected ?

<Tooltip>
  <Button className="bg-black">Top</Button>
  <Tooltip.Content showArrow placement="top">
    <Tooltip.Arrow className="bg-red-400" />
    <p>Top placement</p>
  </Tooltip.Content>
</Tooltip>

Thank you for the help !

[agrovr]

Tooltip.Arrow is a positioning wrapper. The visible shape is the nested SVG, so bg-red-400 colors the wrapper rather than the arrow path.

Target HeroUI's nested data-slot="overlay-arrow" element from Tooltip.Content:

<Tooltip>
  <Button>Top</Button>
  <Tooltip.Content
    showArrow
    placement="top"
    className="[&_[data-slot=overlay-arrow]]:fill-red-400 [&_[data-slot=overlay-arrow]]:stroke-red-500"
  >
    <Tooltip.Arrow />
    <p>Top placement</p>
  </Tooltip.Content>
</Tooltip>

If your Tailwind setup does not emit those arbitrary descendant variants, the equivalent CSS is:

.my-tooltip [data-slot="overlay-arrow"] {
  fill: var(--color-red-400);
  stroke: var(--color-red-500);
}

<Tooltip.Content className="my-tooltip" showArrow placement="top">
  <Tooltip.Arrow />
  <p>Top placement</p>
</Tooltip.Content>

HeroUI's source renders the default arrow as an SVG with that data slot, and its component CSS normally applies fill: var(--overlay) there. That is the rule being overridden rather than the arrow wrapper's background:

• https://github.com/heroui-inc/heroui/blob/v3/packages/react/src/components/tooltip/tooltip.tsx
• https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/tooltip.css