導(dǎo)入

Shadcn は、React プロジェクトで UI コンポーネントをコピー＆ペーストするための頼りになるライブラリです。よく使用されるコンポーネントの 1 つは Tooltip で、これは @radix-ui/react-tooltip の上に構(gòu)築されます。

デフォルトのツールチップは次のようになります:

ツールチップ矢印の追加

提供されているコンポーネントはそのまま使用しても問(wèn)題なく機(jī)能しますが、ツールチップに矢印を追加するなど、さらにカスタマイズを追加したいと思うようになりました。インスピレーションを得るため、tremor.so の Tooltip コンポーネントを參考にしました。これも @radix-ui/react-tooltip に基づいています。

幸いなことに、@radix-ui/react-tooltip には Arrow コンポーネントが含まれているため、矢印の追加は簡(jiǎn)単です。これを Content コンポーネント內(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>
)

しかし、矢印を含むツールチップ全體の周?chē)欷司辰缇€を追加したい場(chǎng)合はどうすればよいでしょうか?

ツールチップの境界線を追加する

これを?qū)g現(xiàn)するには、Arrow コンポーネントのスタイルを設(shè)定する必要があります。いくつかのアプローチを見(jiàn)てみましょう:

素樸なアプローチ

Tailwind クラスを使用して矢印に境界線を直接追加するのが良い出発點(diǎn)と思われます:

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

しかし、このアプローチは期待どおりに機(jī)能しません。 border プロパティは、矢印の形狀自體ではなく、要素の長(zhǎng)方形の境界に適用されます。

ストロークプロパティの使用

矢印は 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'
/>

これはうまく機(jī)能しますが、矢印の上の境界線はまだ表示されています。これを修正するには、別の方法を検討してみましょう。

ドロップ シャドウ オプションを調(diào)べる

もう 1 つの方法は、ドロップシャドウを使用して境界線をシミュレートすることです。

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

これにより、矢印と境界線を備えた視覚的にシームレスなツールチップが作成されますが、ユースケースによっては、これが常に最も正確なソリューションであるとは限りません。

このソリューションは、開(kāi)発時(shí)間を節(jié)約できるさまざまなカスタマイズ可能なツールチップ バリアントを提供する、Origin UI のツールチップ コンポーネントからインスピレーションを得ていることに言及する価値があります。

獨(dú)自のカスタム SVG を使用するなど、さらにスタイリングしてみてはいかがでしょうか?

カスタムSVG矢印

私は Vercel の Web サイトによくアクセスしますが、そのドロップダウン ナビゲーション バー、特に 矢印 が目に留まりました。

どのように設(shè)計(jì)されたのか興味があったので、開(kāi)発ツールを開(kāi)いて要素を調(diào)べ、SVG 矢印を見(jiàn)つけました。次に、それをコピーして Figma に貼り付けて、詳しく見(jiàn)ていきました。

ツールチップの矢印としては、興味深いデザインの選択になるかもしれないと思いました。

位置決め

SVG 矢印の位置は、ツールチップの配置 (上、下、左、または 右) によって異なります。 Content コンポーネントは、位置を動(dòng)的に調(diào)整するために使用できるデータ側(cè)屬性を公開(kā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>
)

次に、組み込みのツールチップ Arrow コンポーネントをカスタム デザインに置き換えることができます。完璧に動(dòng)作するはずですよね?

そうですね、まだです。これを見(jiàn)てください: 矢印はトリガーの近くに配置されるのではなく、ツールチップの中央に固定されています。

この望ましくない動(dòng)作は、各側(cè)の靜的な位置を定義しただけであるために発生します。代わりに、この問(wèn)題を解決するには動(dòng)的な位置を使用する必要があります。

ダイナミックポジション

組み込みの Arrow コンポーネントを再度使用してみましょう。ツールチップの位置変更をシミュレートしながら開(kāi)発ツールで Arrow コンポーネントを検査すると、SVG 要素が左の CSS プロパティを持つスパンでラップされていることがわかります。

この値は、ツールチップの位置に基づいて動(dòng)的に変化します。この左側(cè)の CSS 値をキャプチャして、カスタム矢印コンポーネントに適用できます。

この左の値を追跡するには、MutationObserver を使用してそれを観察する必要があります。

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

最終結(jié)果

期待どおりに動(dòng)作していますか??

追伸ツールチップを左側(cè)または右側(cè)に表示したい場(chǎng)合は、上部の位置を調(diào)整するとよいでしょう。

結(jié)論

このアプローチは機(jī)能しますが、より簡(jiǎn)単で柔軟なツールヒントのスタイルを可能にする UI ライブラリがあると思います。ただし、これに対する回避策を見(jiàn)つけることができてやりがいを感じています。他のオプションを検討することに興味がある場(chǎng)合は、このディスカッションをチェックしてみてください。

以上がShadcn のツールチップ矢印をカスタマイズする裏技的な方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。