自定义 Shadcn 工具提示箭头的 Hacky 方法

介绍

Shadcn 是 React 项目中复制粘贴 UI 组件的首选库。一个常用的组件是 Tooltip，它构建在 @radix-ui/react-tooltip 之上。

默认工具提示如下所示：

添加工具提示箭头

虽然提供的组件开箱即用，但我发现自己想要添加更多自定义功能，例如向工具提示添加箭头。为了获得灵感，我转向了 tremor.so 的 Tooltip 组件，它也是基于 @radix-ui/react-tooltip。

幸运的是，添加箭头很简单，因为 @radix-ui/react-tooltip 包含一个 Arrow 组件。您只需将其包含在内容组件中即可。

import * as TooltipPrimitives from '@radix-ui/react-tooltip'

export default () => (
  <TooltipPrimitives.Provider>
    <TooltipPrimitives.Root>
      <TooltipPrimitives.Trigger />
      <TooltipPrimitives.Portal>
        <TooltipPrimitives.Content>
          <TooltipPrimitives.Arrow /> // Add the Arrow component here
        </TooltipPrimitives.Content>
      </TooltipPrimitives.Portal>
    </TooltipPrimitives.Root>
  </TooltipPrimitives.Provider>
)

但是，如果您想在整个工具提示周围添加边框（包括箭头）怎么办？

添加工具提示边框

要实现此目的，您需要设置箭头组件的样式。让我们探索一些方法：

天真的方法

使用 Tailwind 类直接向箭头添加边框似乎是一个很好的起点：

<TooltipPrimitives.Arrow
  className='border border-[var(--tooltip-border-color)] fill-[var(--tooltip-color)]'
  width={12}
  height={7}
  aria-hidden='true'
/>

但是，这种方法并没有达到预期的效果。 border 属性适用于元素的矩形边界，而不是箭头形状本身。

使用描边属性

由于箭头是 SVG 元素，因此您可以使用描边属性来定义边框：

<TooltipPrimitives.Arrow
  className='border-none fill-[var(--tooltip-color)]'
  stroke='var(--tooltip-border-color)'
  stroke-width='2'
  width={12}
  height={7}
  aria-hidden='true'
/>

这样效果更好，但箭头的顶部边框仍然可见。为了解决这个问题，我们来探索另一种方法。

探索投影选项

另一种方法是使用投影来模拟边框：

<TooltipPrimitives.Arrow
  className='-my-px border-none fill-[var(--tooltip-color)] drop-shadow-[0_1px_0_red]'
  width={12}
  height={7}
  aria-hidden='true'
/>

这会创建一个带有箭头和边框的视觉上无缝的工具提示，但根据您的用例，它可能并不总是最精确的解决方案。

值得一提的是，该解决方案的灵感来自于 Origin UI 中的 Tooltip 组件，它提供了各种可定制的工具提示变体，可以节省开发时间。

如何设计更多样式，例如使用我自己的自定义 SVG？

自定义 SVG 箭头

我经常访问Vercel的网站，他们的下拉导航栏引起了我的注意，特别是箭头。

出于对它的设计方式的好奇，我打开了开发工具，检查了元素，并找到了 SVG 箭头。然后我将其复制并粘贴到 Figma 中仔细查看。

我认为这对于工具提示箭头来说可能是一个有趣的设计选择。

定位

SVG 箭头的定位取决于工具提示的位置 - 顶部、底部、左 或 右。内容组件公开了一个数据侧属性，您可以使用该属性动态调整定位：

import * as TooltipPrimitives from '@radix-ui/react-tooltip'

export default () => (
  <TooltipPrimitives.Provider>
    <TooltipPrimitives.Root>
      <TooltipPrimitives.Trigger />
      <TooltipPrimitives.Portal>
        <TooltipPrimitives.Content>
          <TooltipPrimitives.Arrow /> // Add the Arrow component here
        </TooltipPrimitives.Content>
      </TooltipPrimitives.Portal>
    </TooltipPrimitives.Root>
  </TooltipPrimitives.Provider>
)

接下来，我们可以用我们的自定义设计替换内置的工具提示箭头组件。应该可以完美运行吧？

嗯，还没有。看看这个：箭头卡在工具提示的中心，而不是位于触发器附近。

发生这种不良行为是因为我们只为每一侧定义了一个静态位置。相反，我们需要使用动态位置来解决这个问题。

动态位置

让我们再次使用内置的 Arrow 组件开始。如果您在模拟工具提示位置更改时检查开发工具中的箭头组件，您会注意到 SVG 元素被包裹在具有 left CSS 属性的跨度中。

该值根据工具提示的位置动态变化。我们可以捕获这个左侧 CSS 值并将其应用到我们的自定义箭头组件。

为了跟踪这个左值，我们需要使用 MutationObserver 来观察它。

<TooltipPrimitives.Arrow
  className='border border-[var(--tooltip-border-color)] fill-[var(--tooltip-color)]'
  width={12}
  height={7}
  aria-hidden='true'
/>

最终结果

现在按预期工作了??

P.S.如果您喜欢在左侧或右侧显示工具提示，您可能需要调整顶部位置。

结论

虽然这种方法有效，但我确信有一些 UI 库可以实现更简单、更灵活的工具提示样式。然而，找到解决方法是值得的。如果您有兴趣探索其他选项，您可能想查看此讨论。

以上是自定义 Shadcn 工具提示箭头的 Hacky 方法的详细内容。更多信息请关注PHP中文网其他相关文章！