ツールチップには遅延が必要、そしてその遅延をスキップする仕組みも必要
Tooltips Need a Delay, and Then They Need to Skip It
FrontPrepの開発者が、ツールチップの表示遅延を0msに設定したことで、カーソルを移動するだけで次々とツールチップが表示される問題に直面。200msの遅延を追加したものの、今度は隣接するロゴ間の移動で毎回待たされるという新たな問題が発生した。そこで、最初のホバーでは200ms待ち、ツールチップを閉じた後の300ms間は「ウォーム」状態として、次のホバーでは即座に表示するというパターンを実装。この記事では、ReactとRadixを使った実装コードと、Claudeスキルとして再利用する方法を解説する。
クリックは常に意図的ですが、ホバーは意図的ではありません。カーソルは目的の場所に到達するためにページを横切り、その途中で要素の上を通過するため、ツールチップはホバーだけでユーザーがそれを開きたいかどうかを判断できません。200msがそれを判断する時間なのです。