Bug(tooltip): (reactのみ) tooltipの回り込みが発生したときの、矢印の向きが狂う
Opened this issue · 1 comments
ichi-h commented
バグの説明
再現手順・画像・動画
- tooltipのstoryのtemplateを以下に更新する
const Template: Story = {
render: (args) => (
<WizTooltip {...args}>
<WizText>保険見直し、つみ...</WizText>
</WizTooltip>
),
};
- Tooltip.Directionのstoryを開く
- directionに「left」を指定する
- 回り込みは機能するが、矢印の向きが内側に向かない
期待される挙動・機能
- 回り込みが発生しても、tooltipが適用されている要素の方向に矢印が向く
その他考慮事項(任意)
okakyo commented
検証について
-
もともとのやつであれば、回り込みは問題なく動作した
- 実装自体には問題がなく、ブラウザの処理(CSS の block や inline などの機能)が原因と思われる
- 表示するためにあたっての幅が足りていないことが原因
- (表示されるTooltip の余白 (margin,padding)) < (tooltip の width) である場合、Tooltip の周り込みが正常に機能しなくなる
-
仕様上は、Tooltip が左に表示されるところが右側に表示されるため、幅が足りずに右側に回る場合に対しての対応が必要
改善案
-
getBoundingClientRect
を利用して、anchor
,content
のそれぞれの座標位置を割り出して、それぞれの位置関係に応じて アイコンのポジションを変更する -
反転条件は、「Tooltip の width, height が表示される箇所の余白よりも大きい場合」