介紹

Shadcn 是 React 項目中復制粘貼 UI 組件的首選庫。一個常用的組件是 Tooltip，它構(gòu)建在 @radix-ui/react-tooltip 之上。

默認工具提示如下所示：

添加工具提示箭頭

雖然提供的組件開箱即用，但我發(fā)現(xiàn)自己想要添加更多自定義功能，例如向工具提示添加箭頭。為了獲得靈感，我轉(zhuǎn)向了 tremor.so 的 Tooltip 組件，它也是基于 @radix-ui/react-tooltip。

幸運的是，添加箭頭很簡單，因為 @radix-ui/react-tooltip 包含一個 Arrow 組件。您只需將其包含在內(nèi)容組件中即可。

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>
)

但是，如果您想在整個工具提示周圍添加邊框（包括箭頭）怎么辦？

添加工具提示邊框

要實現(xiàn)此目的，您需要設(shè)置箭頭組件的樣式。讓我們探索一些方法：

天真的方法

使用 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'
/>

這會創(chuàng)建一個帶有箭頭和邊框的視覺上無縫的工具提示，但根據(jù)您的用例，它可能并不總是最精確的解決方案。

值得一提的是，該解決方案的靈感來自于 Origin UI 中的 Tooltip 組件，它提供了各種可定制的工具提示變體，可以節(jié)省開發(fā)時間。

如何設(shè)計更多樣式，例如使用我自己的自定義 SVG？

自定義 SVG 箭頭

我經(jīng)常訪問Vercel的網(wǎng)站，他們的下拉導航欄引起了我的注意，特別是箭頭。

出于對它的設(shè)計方式的好奇，我打開了開發(fā)工具，檢查了元素，并找到了 SVG 箭頭。然后我將其復制并粘貼到 Figma 中仔細查看。

我認為這對于工具提示箭頭來說可能是一個有趣的設(shè)計選擇。

定位

SVG 箭頭的定位取決于工具提示的位置 - 頂部、底部、左 或 右。內(nèi)容組件公開了一個數(shù)據(jù)側(cè)屬性，您可以使用該屬性動態(tài)調(diào)整定位：

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>
)

接下來，我們可以用我們的自定義設(shè)計替換內(nèi)置的工具提示箭頭組件。應(yīng)該可以完美運行吧？

嗯，還沒有。看看這個：箭頭卡在工具提示的中心，而不是位于觸發(fā)器附近。

發(fā)生這種不良行為是因為我們只為每一側(cè)定義了一個靜態(tài)位置。相反，我們需要使用動態(tài)位置來解決這個問題。

動態(tài)位置

讓我們再次使用內(nèi)置的 Arrow 組件開始。如果您在模擬工具提示位置更改時檢查開發(fā)工具中的箭頭組件，您會注意到 SVG 元素被包裹在具有 left CSS 屬性的跨度中。

該值根據(jù)工具提示的位置動態(tài)變化。我們可以捕獲這個左側(cè) CSS 值并將其應(yīng)用到我們的自定義箭頭組件。

為了跟蹤這個左值，我們需要使用 MutationObserver 來觀察它。

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

最終結(jié)果

現(xiàn)在按預期工作了??

P.S.如果您喜歡在左側(cè)或右側(cè)顯示工具提示，您可能需要調(diào)整頂部位置。

結(jié)論

雖然這種方法有效，但我確信有一些 UI 庫可以實現(xiàn)更簡單、更靈活的工具提示樣式。然而，找到解決方法是值得的。如果您有興趣探索其他選項，您可能想查看此討論。

以上是自定義 Shadcn 工具提示箭頭的 Hacky 方法的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！