Bug(tooltip): (reactのみ) tooltipの回り込みが発生したときの、矢印の向きが狂う

[ichi-h]

バグの説明

再現手順・画像・動画

• tooltipのstoryのtemplateを以下に更新する

const Template: Story = {
  render: (args) => (
    <WizTooltip {...args}>
      <WizText>保険見直し、つみ...</WizText>
    </WizTooltip>
  ),
};

• Tooltip.Directionのstoryを開く
• directionに「left」を指定する
• 回り込みは機能するが、矢印の向きが内側に向かない

期待される挙動・機能

• 回り込みが発生しても、tooltipが適用されている要素の方向に矢印が向く

その他考慮事項（任意）

[okakyo]

検証について

• もともとのやつであれば、回り込みは問題なく動作した

  • 実装自体には問題がなく、ブラウザの処理(CSS の block や inline などの機能)が原因と思われる
  • 表示するためにあたっての幅が足りていないことが原因
  • (表示されるTooltip の余白 (margin,padding)) < (tooltip の width) である場合、Tooltip の周り込みが正常に機能しなくなる

• 仕様上は、Tooltip が左に表示されるところが右側に表示されるため、幅が足りずに右側に回る場合に対しての対応が必要

改善案

• getBoundingClientRect を利用して、anchor, content のそれぞれの座標位置を割り出して、それぞれの位置関係に応じて アイコンのポジションを変更する

• 反転条件は、「Tooltip の width, height が表示される箇所の余白よりも大きい場合」