How can I override Radix UI Tooltip.Root component

Viewed 71

I am using the Radix UI tooltip, and I am trying to override the styling of the Tooltip.Root component.

I am able to override the other Tooltip components as seen below, but this doesn't work for Tooltip.Root:

import * as TooltipPrimitive from "@radix-ui/react-tooltip";
const StyledTooltipTrigger = styled(TooltipPrimitive.Trigger, {
  display: "flex",
  border: "none",
  background: "transparent",
  padding: 0,
  textAlign: "start",
});

In short, I have a div that is inside the Tooltip.Trigger that I need to expand to width: 100%, however, the Tooltip prevents this div from expanding.

0 Answers
Related