Jquery UI.Datepicker：鼠标悬停时显示工具提示

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>

6 个解决方案

#1

jQuery live is deprecated. You need to use .on or .bind handlers. I updated the fiddle with 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>

#2

I will take Vinoth example 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

小提琴的版本在这里

#3

Try this:

尝试这个：

$(".ui-state-default").hover(function() {

        alert("Test");  
});

#4

<script type="text/javascript">
    $('#academic_calendar').datepicker({
        minDate:0,      
    });
    $(".ui-state-default").on("mouseenter", function() {
        console.log("Hover");
    });
</script>

updated check

更新检查

#5

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:

并将此代码与datepicker一起使用以在工具提示中显示信息：

$("#academic_calendar").datepicker({ minDate: 0 }).tooltip({ show: { delay: 0 }, position: { my: "left+15 center", at: "top center" } });

JSFiddle

的jsfiddle

#6

This is probably the simplest way of doing it.

这可能是最简单的方法。

 $("img.ui-datepicker-trigger").attr('title', 'Select to display date picker.');

#1