Conflict with JQuery UI Datepicker and Tooltip widget

Question

In my html form there is a date field with a multiple line description in the title attribute which pops up in a tooltip. If the Datepicker calendar pops up, the Tootltip disappears as I move the mouse down over the calendar. Unfortunately, it pops back up as soon as I change the month through the NEXT button of the calendar and covers the button. So, I can never go further than one month ahead.

How can I work around this issue?

Here is a sample of one date field:

<input type="text" class="datepicker" id="enddate" title="<b>Lorem ipsum :</b> Enddate<br><br>dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. " />

I am using JQuery 1.9.1.

Here is a JSFiddle that shows the problem. As soon as the next month in the calendar view is selected it is not possible to click NEXT again: http://jsfiddle.net/gnuken/L0gxjLwq/1/

Answer 1

According to the jquery UI Docs the Tooltips is trigered using focusin or mouseover http://api.jqueryui.com/tooltip/#event-open

all what you have to do is turn off the focusin event just use the .off('focusin') at the end of the tooltip declaration DEMO

$(document).tooltip({
    position: {
        my: "left+15 center",
        at: "right center",
        collision: "flipfit"
    },
    content: function () {
        return $(this).prop('title');
    }
}).off('focusin');