Question

我正在尝试在鼠标悬停时添加工具提示，工具提示应显示在鼠标指针的底部。当我悬停在日期但无法绑定工具提示时它会发出警报。这是我的 fiddle link

Js代码

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

Answer 1

jQuery live已被弃用。您需要使用.on或.bind处理程序。我用工具提示更新了fiddle。

 <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>

Answer 2

我将进一步采用 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');
});

小提琴的版本here

Answer 3

试试这个：

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

        alert("Test");  
});

Answer 4

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

updated check

Answer 5

你可以做的另一件事就是用HTML设置标题：

<input type="text" id="#academic_calendar" title="Foo Bar">

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

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

JSFiddle

Answer 6

这可能是最简单的方法。

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

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

6 个答案: