Tooltip closing problem

[Andreas]

Hi,

We are having major problem with the tooltip closing unexpectedly...

In your demo:
http://demos.telerik.com/aspnet-ajax/tooltip/examples/overview/defaultcs.aspx

Change to:
HideEvent: LeaveToolTip
RenderMode: Lightweight

After the tooltip is displayed, move the cursor slowly (moving really fast wont reproduce the issue!), from the top or from the left until the cursor is above the tooltip. In this case the tooltip closes immediately when entering the tooltip!!!

If moving the cursor from the right or bottom into the tooltip, this does not happen.

This issue happens all the time for our users since the tooltip in our case always are located directly to the right of the hovered element, and users often moves the cursor just a little bit to the right and the tooltip closes...

Tested in Firefox and IE10, same behavior.
Only happens in Lightweight render mode...

Regards
Caesar

[Danail Vasilev]

Hi Caesar,

I have successfully reproduced the issue and logged it as a feedback item here, so that you can monitor, comment and vote on it. Currently I cannot provide any time estimates when a fix will be available as the tasks for this Q have already been scheduled. For the time being you can raise the priority of the item by voting on it.

What I can suggest is that you either change RenderMode of the tooltip or set other configuration for hiding the tooltip(e.g. HideEvent="ManualClose", set higher value for the AutoCloseDelay property, etc.)

As a small token of gratitude for reporting this issue to us I have updated your Telerik points.

Regards,
Danail Vasilev
Telerik

[Andreas]

Hi,

Can't find any good solution with HideEvent or AutoCloseDelay...
We really think that the LeaveTooltip is perfect in this situation.

I did find the root cause of it though, $telerik.isMouseOverElementEx is off by 2 px when moving the mouse slowly into the tooltip.
So until you fix it we did comment out four lines of code in that function by replacing it on load:

$telerik.isMouseOverElementEx = function (element, e)
{
    var rect = null;
    //Can throw exception if called by body onclick eventhandler after AJAX update
    try
    {
        rect = $telerik.getOuterBounds(element);
    }
    catch (e)
    {
        return false;
    }

    if (e && e.target)
    {
        //BUG in IE6: If there is a select element in the dropdown [heavyweight object], clientX and clientY come with bad values, and the contains
        //Mozilla bug - option elements in a select cause the mouse to return incorrect mouse offsets
        var tagName = e.target.tagName;
        if (tagName == "SELECT" || tagName == "OPTION") return true;
        if (e.clientX < 0 || e.clientY < 0) return true;
    }

    //See if targetControl rect contains the mouse x,y
    var mousePosition = $telerik.getDocumentRelativeCursorPosition(e);

    //When mouse is taken out slowly  e.clientX and  e.clientY return values on the 'border' of the element - technically - still within it
    //rect.x += 2;
    //rect.y += 2;
    //rect.width -= 4;
    //rect.height -= 4;
    return $telerik.containsPoint(rect, mousePosition.left, mousePosition.top);
};

Regards
Andreas