下にいくつかの通常のボタンがある HTML5 キャンバス アプリがあります。ボタンにツールチップがあり、静的な状況では問題なく動作するようです。(無効なボタンのツールチップが有効なボタンのツールチップと異なる理由はまだわかりません。)
有効なボタンにカーソルを合わせると、そのツールチップがキャンバス サーフェスのボタンの上に表示されます。(これらは通常の jQuery ツールチップです。) ポインターがボタンから離れると、ツールチップは消えます。
ただし、ボタンを押すと (もちろんツールチップはその時点で表示されます)、ボタンはキャンバス上でアニメーション化されたシーケンスを開始し、ツールチップはキャンバス上に永遠に残ります。マウスを別の場所に移動しても、アニメーションの開始後にツールチップがキャンセルされません。他のツールチップは引き続き正常に機能します。
アニメーションの過程で、キャンバスを何十回もクリアして再描画していますが、ツールチップは表示されたままなので、キャンバスとは別の独自の長方形です。
アニメーションで再描画する前に、ボタンのタイトルを null と空に設定してみました。どちらも役に立ちませんでした。ボタンの合成マウスリーブを作成したいのですが、その方法がわかりません。
これは、Chrome と Firefox で発生します。
他の考えはありますか？
回答 Wolf が示唆したように、小さなフィドルを作成しようとして実質的なプログラムを削減したところ、問題の原因が見つかりました。
ボタンを無効にすると、そのツールチップは消えません。ボタンを無効にしても、ツールチップは消えません。ただし、無効化されていない状態のボタンにカーソルを合わせてからカーソルを離すと、ツールチップは消えます。
どうやら、ツールチップを処理するコード (ブラウザ?) は、ボタンが無効になっている場合、mouseleave でボタンのツールチップを処理しません。ただし、ボタンが再度有効になった後は、mouseleave を適切に処理します。
私はこれをバグと考えており、良い回避策が見当たりません。ボタンを無効にしたいときにツールチップが表示されているかどうかわかりません。jQueryチームに提出します。
ご聴取ありがとうございました。
回避策: ボタンを無効にする前に $("#buttonid").mouseleave() を呼び出します。バグはいくつかのブラウザーにあるようで、機能と呼ばれることさえあるため、すぐには修正されそうにありません。この回避策には、ユーザーがポインターを移動してツールチップを元に戻す必要があるという欠点があるため、ブラウザーで適切な解決策を講じたほうがよいでしょう。しかし、少なくとも合理的な回避策があります。