Jquery UI.Datepicker：顯示鼠標懸停的工具提示

我試圖在鼠標懸停上添加工具提示，工具提示應顯示在鼠標指針的底部。它會在我懸停日期時發出警報，但無法綁定工具提示。這裏是我的fiddle linkJquery UI.Datepicker：顯示鼠標懸停的工具提示

JS代碼

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

來源

2014-02-13 Shivam Pandya

您可以參考以下鏈接： http://api.jqueryui.com/tooltip/#entry-examples。 –

jQuery的現場已被棄用。您需要使用.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>

來源

2014-02-13 11:36:58 Vinoth

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

updated check

來源

2014-02-13 11:37:34

它應該顯示自定義工具提示的風格和數據從PHP，是嗎？ –

是的，你可以做到。 –

你能不能在小提琴中更新？我是新來的jQuery –

試試這個：

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

     alert("Test"); 
});

來源

2014-02-13 11:40:15 Aditi

我將採取Vinoth例如一步，並確保我綁定聽者直接因此，如果HTML日曆動態插入將來它也可以。也使jQueryUI的工具提示，如：

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

，並使用此代碼：

$(document).tooltip(); 
$('#academic_calendar').datepicker({ 
minDate:0,  
}); 
$("html").on("mouseenter",".ui-state-default", function() { 
$(this).attr('title', 'This is the hover-over text'); 
});

小提琴here

來源

2014-02-13 11:58:40

，你可以這樣做只是設置在HTML的標題另一件事的版本在工具提示中顯示信息的日期選擇器：

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

JSFiddle

來源

2014-08-07 19:21:26

這可能是最簡單的方法。

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

來源

2016-12-19 17:42:32

Jquery UI.Datepicker：顯示鼠標懸停的工具提示

回答

相關問題