キーボードショートカット用のマウスオーバーはどのように設計する必要がありますか？
ツールバーの右側にキーボードアイコンがあり、ホバーすると、大きなキーボードリファレンスツールチップが表示されます。アイコンをクリックすると、キーボードバインディングのタブに設定ダイアログが開きます。
アイコンは機能を直感的に示しているのではないようです。どうすればこれを修正できますか？
おそらく、UIにはホバー操作やこの大きさのディスプレイのツールチップがあってはなりません。クリック操作と、スクロールと検索を備えたモーダルを使用することでメリットがあります。これにより、すべてのショートカットを圧倒的な方法で提供できます。その概念の可能な実装のWebデモをセットアップしましたが、最新のコードを使用しており、すべてのブラウザーで実行できない場合があります（最新のchromeおよびEdgeバージョンでテストしました）。
デモで注意すべき重要な点は、スペーシングです。これにより、テキストを簡単にスキャンできます。ホバー効果：期待した場所で行にフォーカスを合わせます。モノスペースフォントと非モノスペースフォントの区別：これにより、読みやすい。
多くの場所でこれが行われますが、Atomコードエディターが考えられます。これらの場所では、キーボードショートカットの完全な検索が提供され、UIを使用すると簡単にスキャンできます。これにより、快適なエクスペリエンスを実現できます。ユーザーのため。
http://codepen.io/CKH4/pen/PpNKoB/
ウェブページにアクセスできない場合に備えて、機能のgifが必要かどうかをお知らせください。