自訂 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中文網其他相關文章！