介紹

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

默認(rèn)工具提示如下所示：

添加工具提示箭頭

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

幸運(yùn)的是，添加箭頭很簡(jiǎn)單，因?yàn)?@radix-ui/react-tooltip 包含一個(gè) 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>
)

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

添加工具提示邊框

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

天真的方法

使用 Tailwind 類直接向箭頭添加邊框似乎是一個(gè)很好的起點(diǎn)：

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

但是，這種方法并沒有達(dá)到預(yù)期的效果。 border 屬性適用于元素的矩形邊界，而不是箭頭形狀本身。

使用描邊屬性

由于箭頭是 SVG 元素，因此您可以使用描邊屬性來(lái)定義邊框：

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

這樣效果更好，但箭頭的頂部邊框仍然可見。為了解決這個(gè)問(wèn)題，我們來(lái)探索另一種方法。

探索投影選項(xiàng)

另一種方法是使用投影來(lái)模擬邊框：

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

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

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

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

自定義 SVG 箭頭

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

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

我認(rèn)為這對(duì)于工具提示箭頭來(lái)說(shuō)可能是一個(gè)有趣的設(shè)計(jì)選擇。

定位

SVG 箭頭的定位取決于工具提示的位置 - 頂部、底部、左 或 右。內(nèi)容組件公開了一個(gè)數(shù)據(jù)側(cè)屬性，您可以使用該屬性動(dòng)態(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>
)

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

嗯，還沒有?？纯催@個(gè)：箭頭卡在工具提示的中心，而不是位于觸發(fā)器附近。

發(fā)生這種不良行為是因?yàn)槲覀冎粸槊恳粋?cè)定義了一個(gè)靜態(tài)位置。相反，我們需要使用動(dòng)態(tài)位置來(lái)解決這個(gè)問(wèn)題。

動(dòng)態(tài)位置

讓我們?cè)俅问褂脙?nèi)置的 Arrow 組件開始。如果您在模擬工具提示位置更改時(shí)檢查開發(fā)工具中的箭頭組件，您會(huì)注意到 SVG 元素被包裹在具有 left CSS 屬性的跨度中。

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

為了跟蹤這個(gè)左值，我們需要使用 MutationObserver 來(lái)觀察它。

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

最終結(jié)果

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

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

結(jié)論

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

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