Hydration error due to overlapping triggers

[dHarshMakwana]

I am using tablist and inside those I have a tooltip and due to overlapping triggers its causing hydration triggers

`import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "/components/ui/tooltip";
import { sizeChart } from "/constants";
import { type FC } from "react";
import { Tabs, TabsList, TabsTrigger } from "../ui/tabs";

interface SizeTabsProps {
selectedSize: string;
handleSizeChange: (value: string) => void;
}

const SizeTabs: FC = ({ selectedSize, handleSizeChange }) => (
<Tabs
onValueChange={handleSizeChange}
defaultValue={selectedSize}
className=""

<TabsList>
  {sizeChart.map((chart) => (
    <Tooltip key={chart.size}>
      <TooltipTrigger>
        <TabsTrigger
          className="px-[0.9rem] py-6 leading-[0px]"
          value={chart.size}
        >
          {chart.size}
        </TabsTrigger>
      </TooltipTrigger>
      <TooltipContent className="lowercase">
        <p>{chart.dimensions}</p>
      </TooltipContent>
    </Tooltip>
  ))}
</TabsList>

);

export default SizeTabs;
`

[plvnkv]

One of reason of hydration errors with shadcn (radix-ui) in Interactive Content cannot be nested (<a> nested in a <a> tag, <button> nested in a <button> tag, etc.)

Example:

<SheetTrigger>
  <Tooltip>
    <TooltipTrigger>
      <Button size="icon">
        <PlusCircledIcon />
      </Button>
    </TooltipTrigger>
    <TooltipContent>Create</TooltipContent>
  </Tooltip>
</SheetTrigger>

where SheetTrigger, TooltipTrigger and Button renders as HTML button, and you can try fix it by using asChild prop for this elements