Chart Tooltip

import { ChartTooltip } from "@/components/ui/chart-tooltip";

export default function Example() {
  return <ChartTooltip />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const ChartTooltip = forwardRef(({ className, title, value, x, y, visible, ...props }, ref) => {
  if (!visible) return null;
  return (
    <div ref={ref}
      className={cn("pointer-events-none absolute z-50 rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md", className)}
      style={{ left: x, top: y, transform: "translate(-50%, -120%)" }}
      {...props}
    >
      {title && <div className="font-medium">{title}</div>}
      <div>{value}</div>
    </div>
  );
});
ChartTooltip.displayName = "ChartTooltip";

export { ChartTooltip };