我之前问过一个类似的问题,并得到了一个普遍有效的答案,但不适用于我的情况。我将尝试在这里更好地解释我的问题:
我有一个用于创建工具提示的外部 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 中注意到的是,如果我创建一个 Date 类型的输入字段,Chrome 会自动在输入字段中添加一个日期选择器,最重要的是,在该日期选择器上移动鼠标不会导致工具提示消失。我想在其他浏览器(如 Firefox)中模仿 Chrome 中日期选择器的行为。我确信它可以做到,因为 Chrome 做到了——我只是不知道。(我知道为什么 Chrome 会像这样处理日期字段,所以这不是我关心的问题。)
这是我正在尝试制作的示例 - 它在 Chrome 中看起来像这样(Chrome 自动将日期选择器添加到日期输入字段)并且您可以看到将鼠标移动到日期选择器不会生成工具提示(如果你愿意,日期选择器父容器)走开:
问题是如何制作一个工具提示,我可以在其中添加一个日期选择器,并且能够在选择日期时不关闭工具提示的情况下选择一个日期(当鼠标远离工具提示容器,但在容器的子节点上)
编辑: jsfiddle 现在位于: http: //jsfiddle.net/yad6L/14/ (Datepicker 甚至不在那里加载 - 我添加了 2 个 jquery js 文件)