jQuery UI Widgets Forums Dialogs and Notifications Tooltip, Notification, Popover hover tooltip without any timer ?

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • 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

    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/

    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

    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/

    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

    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/

    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.

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

You must be logged in to reply to this topic.