介紹

Shadcn 是 React 專(zhuān)案中複製貼上 UI 元件的首選函式庫(kù)。一個(gè)常用的元件是 Tooltip，它建構(gòu)在 @radix-ui/react-tooltip 之上。

預(yù)設(shè)工具提示如下圖所示：

新增工具提示箭頭

雖然提供的元件開(kāi)箱即用，但我發(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è)工具提示周?chē)砑舆吙颍ò^）怎麼辦？

新增工具提示邊框

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

天真的方法

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

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

但是，這種方法並沒(méi)有達(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'
/>

這樣效果更好，但箭頭的頂部邊框仍然可見(jiàn)。為了解決這個(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è)帶有箭頭和邊框的視覺(jué)上無(wú)縫的工具提示，但根據(jù)您的用例，它可能並不總是最精確的解決方案。

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

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

自訂 SVG 箭頭

我經(jīng)常造訪(fǎng)Vercel的網(wǎng)站，他們的下拉導(dǎo)覽列吸引了我的注意，特別是箭頭。

出於對(duì)它的設(shè)計(jì)方式的好奇，我打開(kāi)了開(kāi)發(fā)工具，檢查了元素，並找到了 SVG 箭頭。然後我將其複製並貼上到 Figma 中仔細(xì)查看。

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

定位

SVG 箭頭的定位取決於工具提示的位置 - 頂部、底部、左 或 右。內(nèi)容組件公開(kāi)了一個(gè)資料側(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)行吧？

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

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

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

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

此值會(huì)根據(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)文章！