TOMILOG

AntdのTooltipをツールチップにホバーしたときは非表示にする

AntdのTooltipをツールチップにホバーしたときは非表示にする
| 2020/08/30

Actual

デフォルトの動作は、Tooltipにカーソルが移動しても表示されたままになる
antd-tooltip-デフォルトの動き

Expected

ただ、この動作だとTooltipが邪魔になる場合があるので、ターゲット外にカーソルが移動したらTooltipが非表示になってほしい

antd-tooltip-理想の動き

やりかた

visibleEnterTooltipみたいなツールチップの上にマウスが乘ったときの動作オプションがあるかな〜と思ったけど見つからず。。。

mouseLeaveDelay = 0 を設定することで理想の動きを実現しました。

mouseLeaveDelayは、マウスが離れてからツールチップが非表示になるまでの遅延時間のオプション。

これを0にすると、対象の要素とツールチップの隙間をマウスが通ることでツールチップにマウスが乗る前に消えることになる。

a-tooltip(placement="right", :mouseLeaveDelay="0")
  span(slot="title") ソーシャルアイコンを配置します
  div(:class="$style.iconBlock")
    social-icon

(AntdVueを使っているが、Antdでも同様のオプションがあるので実装可能です。)

とみー
フリーランス ← フルスタックエンジニア ← Webデザイナー。2018年、長野県に移住しフルリモートで様々サービス開発に携わるフロントエンジニアとして活動中。開発で得た知見を発信していきます。