Radix UIのTooltip.Arrowをカスタマイズする

Radix UIのTooptipを表示する時に、それの下の三角はデフォルトが黒三角ですが、実際のデザインに合わせて、独自な三角を描画する方法をメモする。

デフォルト三角

デザインの三角

• 白い背景
• Strokeあり

実装方法

svgタグを使って、その中でpolylineタグにより直接に線を引く

<RadixTooltip.Arrow asChild width={10} height={5}>
  <svg className="fill-white stroke-slate300 stroke-[2px]">
    <polyline points="0,0 15,10 30,0" />
  </svg>
</RadixTooltip.Arrow>

• svgタグのclass名に直接fill-white色などを記載できる