ツールチップには遅延が必要、そしてその遅延をスキップする仕組みも必要
Tooltips Need a Delay, and Then They Need to Skip It
FrontPrepの開発者が、ツールチップの表示遅延を0msに設定したことで、カーソルを移動するだけで次々とツールチップが表示される問題に直面。200msの遅延を追加したものの、今度は隣接するロゴ間の移動で毎回待たされるという新たな問題が発生した。そこで、最初のホバーでは200ms待ち、ツールチップを閉じた後の300ms間は「ウォーム」状態として、次のホバーでは即座に表示するというパターンを実装。この記事では、ReactとRadixを使った実装コードと、Claudeスキルとして再利用する方法を解説する。
クリックは常に意図的ですが、ホバーは意図的ではありません。カーソルは目的の場所に到達するためにページを横切り、その途中で要素の上を通過するため、ツールチップはホバーだけでユーザーがそれを開きたいかどうかを判断できません。200msがそれを判断する時間なのです。
HNでの議論
84- ProxCoques
ジェフ・ラスキン(『The Humane Interface』にもこのことを書いている)のもとで、AppleがSystem 6で1993年頃にこのようなインタラクションの問題を観察して修正していたのに、数十年後に同じ問題が再発見され、再修正されなければならないというのは、いつまで経っても驚かされる。
- brixie
これは、https://emilkowal.ski/ui/you-dont-need-animations の最後の例と同じテクニックを説明しているように見える(そして、もしこれが面白いと思ったなら、その記事全体を読む価値があると思う)。非常に細かいディテールで、普段は気づかないだろう(アニメーションを作らないから、頭に浮かばない)が、知ってしまえば、いつもそれについて考えるようになる。
- kazinator
基本的に、グローバルな温度を持たせる。ポインタがツールチップを持つ要素の上にあるとき、温度が上がる。そうでなければ冷める(おそらく異なる速度で)。ツールチップは、ポインタが範囲内にあり、温度が一定の閾値を超えているときだけ表示される。
- hurrell
これはヒステリシスの例と言えるでしょう。素晴らしい! https://en.wikipedia.org/wiki/Hysteresis
- compiler-guy
この細部へのこだわりには大いに感謝する。世の中にはこれが十分にない。例えば、Visual Studioでは、ホバー時のポップアップが速すぎて、ほとんど何も選択できないか、単語を選択する代わりにポップアップをクリックしてしまうことがある。