在第三方工具提示中添加datepicker - 第2部分

Question

之前我问了一个类似的问题并得到了一般有效的答案，但不是我的情况。我会在这里更好地解释我的问题：

我有一个用于创建工具提示的外部js库。这就是图书馆所做的一切。 我根据鼠标悬停的项目动态生成工具提示内容。在此工具提示中，我使用输入字段允许用户通过jquery datepicker选择日期：http://jqueryui.com/datepicker/。

问题： 工具提示的工作方式是，如果鼠标离开工具提示区域，它将消失。因此，当鼠标移动到日期选择器时，工具提示消失，只剩下日期选择器。

我创建工具提示内容的方法是动态连接一些字符串：
content += 'test1' + '<input type="text" id="datepicker" >';

然后我通过调用显示第三方工具提示：
tooltip.pop(callerContainer, content);

我不知道如何将datepicker附加到输入字段，并将 datepicker对象添加到内容字符串变量。

尝试过的解决方案： 在工具提示已合并到页面的DOM中之后，我通过调用一个方法将datepicker添加到工具提示中尝试了一个技巧：
setTimeout(attachDatepicker(), 600) attachDatepicker()执行此操作的位置：$("#datepicker").datepicker();

我还尝试在输入字段中添加onmouseover：
<input type="text" id="datepicker" onmouseover="attachDatepicker()">'

工具提示会窃取所有鼠标事件，所以如果我想检查鼠标是否在某个元素之外，我必须像这样单独绑定：     $（“＃element_id”）。mouseleave（function（）{...}）;

结果： setTimeout方式不起作用，但onmouseover解决方案确实有效。它显示了日期选择器，现在我已经描述了当用户选择日期时工具提示消失的问题。

我也可以将实际的日历小部件嵌入到工具提示的html中，但到目前为止我一直无法做到这一点，因为一旦显示工具提示，我无法改变其尺寸（它不会如果我在其内容中添加更多内容，则展开。）

注意： 我在Chrome中注意到的是，如果我创建一个Date类型的输入字段，Chrome会自动在输入字段中添加一个日期选择器，最重要的是，在该日期选择器上移动鼠标不会导致工具提示消失。我想在其他浏览器（如Firefox）中模仿Chrome中datepicker的行为。我确信它可以做到因为Chrome做到了 - 我只是没有这方面的知识。 （我知道为什么Chrome会像这样处理日期字段，所以这不是我关注的问题。）

以下是我正在尝试制作的示例 - 在Chrome中看起来像这样（Chrome自动添加日期选择器到日期输入字段）并且您可以看到将鼠标移动到日期选择器不会如果你愿意，使工具提示（datepicker父容器）消失：

问题是如何制作工具提示，我可以添加一个日期选择器，并且能够在选择日期时选择日期而不关闭工具提示（当鼠标远离工具提示容器时，但是在容器）

修改 jsfiddle现在位于：http://jsfiddle.net/yad6L/14/ （Datepicker甚至没有加载 - 我添加了2个jquery js文件）