javascript Jquery UI.Datepicker：在鼠标悬停时显示工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21753016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery UI.Datepicker : Display tooltip on mouse hover
提问by Shivam Pandya
I'm trying to add tool tip on mouse hover, tooltip should display at bottom of mouse pointer. It alert when I hover on date but unable to bind tooltip. Here is my fiddle link
我正在尝试在鼠标悬停时添加工具提示，工具提示应显示在鼠标指针的底部。当我将鼠标悬停在日期上但无法绑定工具提示时，它会发出警报。这是我的小提琴链接
Js Code
JS代码
<script type="text/javascript">
$('#academic_calendar').datepicker({
minDate:0,
});
$(".ui-state-default").live("mouseenter", function() {
console.log("Hover");
});
</script>
回答by Vinoth
jQuery live is deprecated. You need to use .on or .bind handlers. I updated the fiddlewith the tooltip.
jQuery live 已弃用。您需要使用 .on 或 .bind 处理程序。我用工具提示更新了小提琴。
<script type="text/javascript">
$('#academic_calendar').datepicker({
minDate:0,
});
$(".ui-state-default").on("mouseenter", function() {
$(this).attr('title', 'This is the hover-over text'); // title attribute will be shown during the hover
});
</script>
回答by Emil Borconi
I will take Vinothexample one step further, and make sure that I bind the listener to html directly so if the calendar is inserted dynamically in future it also works. Also enable jqueryui tool-tip, like this:
我将进一步以Vinoth为例，并确保我将侦听器直接绑定到 html，因此如果将来动态插入日历，它也可以工作。还启用 jqueryui 工具提示，如下所示：
$( document ).tooltip();
$('#academic_calendar').datepicker({
minDate:0,
});
$("html").on("mouseenter",".ui-state-default", function() {
$(this).attr('title', 'This is the hover-over text');
});
Version of fiddle here
小提琴版本在这里
回答by Aditi
Try this:
试试这个：
$(".ui-state-default").hover(function() {
alert("Test");
});
回答by Bharat soni
<script type="text/javascript">
$('#academic_calendar').datepicker({
minDate:0,
});
$(".ui-state-default").on("mouseenter", function() {
console.log("Hover");
});
</script>
回答by Hans Hauge
Another thing you can do it just set the title in HTML:
你可以做的另一件事是在 HTML 中设置标题：
<input type="text" id="#academic_calendar" title="Foo Bar">
And use this code with the datepicker to display the info in the tooltip:
并将此代码与日期选择器一起使用以在工具提示中显示信息：
$("#academic_calendar").datepicker({ minDate: 0 }).tooltip({ show: { delay: 0 }, position: { my: "left+15 center", at: "top center" } });
回答by Luis Manuel Villalvazo-Hinojos
This is probably the simplest way of doing it.
这可能是最简单的方法了。
$("img.ui-datepicker-trigger").attr('title', 'Select to display date picker.');
