如何在不修改shadcn Tooltip核心导入代码的情况下移除箭头？

方法一：利用Radix UI的slotProps直接隐藏箭头 #

Shadcn的Tooltip组件基于Radix UI实现，TooltipContent支持通过slotProps属性直接控制内部箭头元素的样式。你可以在使用组件时添加这个配置，无需修改核心的tooltip.tsx文件：

<Tooltip>
  <TooltipTrigger asChild>
    <Button>{children}</Button>
  </TooltipTrigger>
  <TooltipContent
    side="bottom"
    align="center"
    sideOffset={8}
    // 通过slotProps隐藏箭头
    slotProps={{
      arrow: {
        style: { display: 'none' }
      }
    }}
  >
    <p>tooltip</p>
  </TooltipContent>
</Tooltip>

方法二：添加自定义CSS类隐藏箭头 #

如果更习惯用CSS控制，可以给TooltipContent添加自定义类名，通过选择器定位到箭头元素并隐藏：

<Tooltip>
  <TooltipTrigger asChild>
    <Button>{children}</Button>
  </TooltipTrigger>
  <TooltipContent
    side="bottom"
    align="center"
    sideOffset={8}
    // 用Tailwind类直接隐藏箭头，也可以用自定义CSS类
    className="data-[state=open]>.arrow:hidden"
  >
    <p>tooltip</p>
  </TooltipContent>
</Tooltip>

这两种方法都是在组件使用层面做修改，完全不会影响components/ui/tooltip.tsx里的核心导入和代码。

内容的提问来源于stack exchange，提问作者m112120