導(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ǎng)合はどうすればよいでしょうか?

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

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

素樸なアプローチ

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

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

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

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

カスタムSVG矢印

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

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

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

位置決め

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

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)作するはずですよね?

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

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

ダイナミックポジション

組み込みの Arrow コンポーネントを再度使用してみましょう。ツールチップの位置変更をシミュレートしながら開発ツールで 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 ライブラリがあると思います。ただし、これに対する回避策を見つけることができてやりがいを感じています。他のオプションを検討することに興味がある場(chǎng)合は、このディスカッションをチェックしてみてください。

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