hover tooltip without any timer ? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: autoHide, hover, jqxTooltip, Tooltip

This topic contains 6 replies, has 2 voices, and was last updated by Dimitar 11 years, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

hover tooltip without any timer ? Posts
September 4, 2013 at 1:10 pm hover tooltip without any timer ? #28307

stephan
Participant

Hi,

Is it possible to create a normal on-hover tooltip that shows up for as long as the mouse hovers over en element ?

* It should appear when the mouse begins hovering the element,
* It should stay visible for as long as the mouse stays on the element
* It should disappear when the mouse leaves the element
* no extra delay or timer behaviour at all

Can this be achieved with jqxTooltip parameters, or do I have to code this manually using “hover” or “mouseenter” etc event(s) ?

Regards,
Stephan

September 5, 2013 at 5:02 am hover tooltip without any timer ? #28366
Dimitar
Participant
Hello Stephan,

Here is how to achieve this functionality:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            $("#filmPicture1").jqxTooltip({ content: 'The Amazing Spider-man', position: 'bottom', autoHide: false, name: 'movieTooltip', theme: theme });
            $("#filmPicture1").mouseleave(function () {
                $("#filmPicture1").jqxTooltip('close');
            });
        });
    </script>
</head>
<body>
    <div style="margin-left: 180px; width: 400px;" id="container">
        <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" />
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
September 5, 2013 at 7:45 am hover tooltip without any timer ? #28378

stephan
Participant

Hi Dimitar,

Yes, thats the sortof hand coded solution I had in mind. But sadly it suffers from the same problem that I reported in a previous posting: if the mouse leaves the element with tooltip before the “open” animation has finished the tooltip will not react to the “close. Instead it will remain permanently visible. Thus I was hoping for a tooltip built-in functionality that does not suffer from this problem.

While this problem might sound like a rather constructed case, let me tell you that it happens in reality distressingly often. Typecially when you are mouving with the mouse cursor somewhere and just happen to travel across the element with the tooltip.

Regards,
Stephan

September 5, 2013 at 8:39 am hover tooltip without any timer ? #28382

Dimitar
Participant

Hi Stephan,

We will consider expanding jqxTooltip’s functionality in future versions of jQWidgets. However, the behaviour you described (tooltip stays visible) does not occur in the provided example. Please test it with the latest version – 3.0.2.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

September 6, 2013 at 8:13 am hover tooltip without any timer ? #28432
stephan
Participant
Hi Dimitar,

I’ve created a fiddle to test your code logic, in the hope of not getting the “tooltip stays visible” problem:
http://jsfiddle.net/_stephan_/TW79Z/4/

Sadly I was not successful: I’ve been able to reproduce the “tooltip stays visible” problem with that fiddle. The best way to reproduce it is to sweep up/down across the element in various speeds and occasionally the tooltip will not disappear. Did I do something wrong in the fiddle ?

The only sortof workaround I have found is to use a timeout in the “mouseleave”:
```
$("#tooltipParent").mouseleave(function () {
    setTimeout(function () {
        $("#tooltipParent").jqxTooltip('close');
    }, 100);
});
```
Along with setting “animationShowDelay” to 100 as well (to match the timeout).

Regards,
Stephan
September 9, 2013 at 4:51 am hover tooltip without any timer ? #28532

Dimitar
Participant

Hi Stephan,

We are not able to reproduce the issue even when testing out your fiddle. Please share the browser (and its version) and the OS you are testing with.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

September 9, 2013 at 7:41 am hover tooltip without any timer ? #28563

Dimitar
Participant

UPDATE: We were able to reproduce the reported issue. It will be fixed in the next version of jQWidgets.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.