以前に同様の質問をしたことがあり、一般的には機能する回答を得ましたが、私の場合はそうではありません. ここで私の質問をよりよく説明しようとします：
ツールチップの作成に使用する外部 js ライブラリがあります。ライブラリが行うのはそれだけです。マウスが置かれているアイテムに応じて、ツールチップのコンテンツを動的に生成します。このツールチップでは、入力フィールドを使用して、ユーザーが jquery datepicker: http://jqueryui.com/datepicker/を介して日付を選択できるようにします。
問題: ツールチップは、マウスがツールチップ領域から出ると消えるように動作します。そのため、マウスを日付ピッカーに移動すると、ツールチップがなくなり、日付ピッカーだけが残ります。
ツールチップのコンテンツを作成する方法は、その場でいくつかの文字列を連結することです。
content += 'test1' + '<input type="text" id="datepicker" >';
次に、次のように呼び出して、サード パーティのツールチップを表示します。
tooltip.pop(callerContainer, content);
日付ピッカーを入力フィールドにアタッチし、日付ピッカー オブジェクトをコンテンツ文字列変数に追加する方法がわかりません。
試した解決策:
ツールチップがページの DOM に組み込まれた後、日付ピッカーをツールチップに追加するメソッドを呼び出してトリックを試しました:これは
setTimeout(attachDatepicker(), 600)
どこで行われますかattachDatepicker():$("#datepicker").datepicker();
onmouseoverまた、入力フィールドに追加しようとしました：
<input type="text" id="datepicker" onmouseover="attachDatepicker()">'
ツールチップはすべてのマウス イベントを盗むので、マウスが要素の外にあるかどうかを確認したい場合は、次のように個別にバインドする必要がありました。 $("#element_id").mouseleave(function () { ... });
結果:setTimeout方法はうまくいきませんでしたが、
解決onmouseover策はうまくいきました。日付ピッカーが表示されましたが、ユーザーが日付を選択するとツールチップが消えるという問題については既に説明しました。
実際のカレンダー ウィジェットをツールチップの html に埋め込んでも問題ありませんが、これまでのところ、ツールチップが表示されるとそのサイズを変更できないため、これを行うことができませんでした (その内容にさらに追加します）。
注: Chrome で気付いたのは、日付型の入力フィールドを作成すると、Chrome は入力フィールドに日付ピッカーを自動的に追加し、最も重要なのは、その日付ピッカーにマウスを移動してもツールチップが消えないことです。Firefox などの他のブラウザーで Chrome の datepicker の動作を模倣したいと考えています。Chromeがそれを行うので、それができると確信しています-私には知識がありません。(Chrome がこのように日付フィールドを処理する理由を知っているので、それは私の関心事ではありません。)
これは私が作ろうとしているものの例です-Chromeでは次のようになります(Chromeは日付入力フィールドに日付ピッカーを自動的に追加します)、マウスを日付ピッカーに移動してもツールチップが表示されないことがわかります（必要に応じてdatepicker親コンテナー）離れます：
問題は、日付ピッカーを追加して、日付を選択しているときにツールチップを閉じずに日付を選択できるツールチップを作成する方法です (マウスがツールチップ コンテナーから離れているが、コンテナーの子にあります)。
編集: jsfiddle は次の場所にあります: http://jsfiddle.net/yad6L/14/ (Datepicker はそこに読み込まれません - 2 つの jquery js ファイルを追加しました)