Last Updated: 13 Sep 2023 12:42 by ADMIN
Created on: 11 Sep 2023 08:38
Category: Kendo UI® for Vue
Type: Bug Report
Tooltip stays when first mouseout event is over the tooltip element


I noticed a bug with the Tooltip component, it can be reproduced here: https://www.telerik.com/kendo-vue-ui/components/tooltip/positioning/

  1. Hover where it says HOVER ME until the tooltip shows up
  2. Move the mouse up very quickly. When the mouseout event is over the tooltip, the tooltip does not close -> NOK, the tooltip is open, but the mouse is no longer over the element

In Tooltip.js there is a function called "handleMouseOut" that has this line:

const element = currentDocument && currentDocument.elementFromPoint(event.clientX, event.clientY);

Followed by:

if (isTooltipElement(element) || this.computedTarget !== event.target) {

So when the mouseOut event is over the tooltip element, it is ignored, leaving the tooltip visible.

I was able to fix this by adding the following CSS styling to the tooltip element: `pointer-events: none;`, but now I may have introduced a new issue.

What is the reason for ignoring the mouseout event when it's over the tooltip?

Posted on: 13 Sep 2023 12:42

Hello, Tony,

The reported behavior is related to a known bug the status of which can be tracked here:

I have added this report there to raise the priority of the issue.

As you can see in the item above, the workaround found by you is also the temporary solution that we recommend so you can use it until the fix is available:

.k-animation-container.k-chart-tooltip-wrapper {
  pointer-events: none;

Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources

Posted on: 11 Sep 2023 08:39

Small correction:

2. Move the mouse up over the tooltip very quickly