Shadcn のツールチップ矢印をカスタマイズする裏技的な方法

導入

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

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

ツールチップ矢印の追加

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

幸いなことに、@radix-ui/react-tooltip には Arrow コンポーネントが含まれているため、矢印の追加は簡単です。これを Content コンポーネント内に含めるだけです。

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 コンポーネントのスタイルを設定する必要があります。いくつかのアプローチを見てみましょう:

素朴なアプローチ

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

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

ドロップ シャドウ オプションを調べる

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

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

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

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

カスタムSVG矢印

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

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

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

位置決め

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

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 コンポーネントをカスタム デザインに置き換えることができます。完璧に動作するはずですよね?

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

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

ダイナミックポジション

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

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

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

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

最終結果

期待どおりに動作していますか??

追伸ツールチップを左側または右側に表示したい場合は、上部の位置を調整するとよいでしょう。

結論

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

以上がShadcn のツールチップ矢印をカスタマイズする裏技的な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。