I am using hoverIntent to make a flyout menu. I wanted to give the user the option to close the flyout by clicking a "close" button as well as the normal way of hovering out.

I cant figure out how to cancel the hoverIntent_t timer as I am not sure how to access the property. I understand it would be contained within the function. I searched on stackoverflow and someone mentioned the hoverIntent timer id is saved as an attribute of the html object but every time I try to grab that property/attribute, it is undefined.

In the example below, if you click on the close button, you can see that the timeout is still running. I would like to learn a way to access that timeout id so I can clear it.
any help is appreciated.

http://codepen.io/anon/pen/ZYoJOp

Like the r5 issue which would improperly trigger mouse out when entering a child input[type="text"]. Same issue except it happens when you hover over a chrome autocomplete suggestion for an input element.

Reference to old bug: "hoverIntent r5 suffers from a defect in Google Chrome that improperly triggers mouseout when entering a child input[type="text"] element. hoverIntent r6 uses the same mouseenter/mouseleave special events as jQuery's built-in hover, and jQuery 1.5.1 patched this issue. Thanks to Colin Stuart for tipping me off about this and for providing isolated code to demonstrate/test."

@briancherne The minified version of the plugin is missing a closing ';' so when simply copy-pasted into a plugins.js (ala H5BP) the jquery plugin causes proceeding plugins to throw JS errors.

The 'website' field on the repository home page is:
http://http//cherne.net/brian/resources/jquery.hoverIntent.html
I'm sure it should be:
http://cherne.net/brian/resources/jquery.hoverIntent.html

As far as I can see it is impossible to install a specific version of hoverIntent with Bower. If I do:

$ bower install jquery.hoverIntent

it will install the latest version. Though, if I want to pin a version:

$ bower install jquery.hoverIntent#r7

or even:

$ bower install jquery.hoverIntent#v1.8.0

Bower will fail:

bower not-cached git://github.com/LeMisterV/jquery.hoverintent.git#r7
bower resolve git://github.com/LeMisterV/jquery.hoverintent.git#r7
bower ENORESTARGET Tag/branch r7 does not exist

Is it possible to fix this in order to be able to install older versions of hoverIntent (or just pin the current version)?

Add an minified version of github it would be convenient for those who use bower.

Would it be possible to modify so it worked on injected items?

Bower is deprecated. ⚰️

So let's remove the bower.json file for v2.0.

http://www.jsdelivr.com/#!jquery.hoverintent looks really outdated

Hello,
I loaded a code:

   $(document).ready(function(){
        $("#sidebar").hoverIntent(alert("mouseover"),alert("mouseout"));
    });

..to make a test.

Result is only two errors on log.

Please check, thanks.

Hi,

I'm using hoverIntent for a menu system that incorporates a timeout for calling the 'out' handler. Closing and opening menus does not work as I'd expect. For two hover items A and B, if I move quickly from A to B to A again then I expect A to open, but it doesn't. There's a script to reproduce this issue on JSFiddle:
http://jsfiddle.net/d_ir/u31xjd5d/1/

From a quick look at the source, it would seem that the ob.hoverIntent_t does not get called for the mouseleave event on the first tab item.

I can workaround the issue by removing the "if (!ob.hoverIntent_s)" condition on line 101.

I'm not sure if this is something I'm doing wrong, or if this is a bug. Any help would be appreciated.

Thanks
Daniel

First level flyout works as expected, but touch event on second level loads the link, instead of the 3rd level flyout.

Hi Brian
I've found a problem using superfish menu and it is due from your script
Do you want to have a look here?

joeldbirch/superfish#75

i'm waiting your answer
thanks
bye

The timeout value only applies to the method called on mouseout, and not the method called on mouseenter. So if you have several elements with mouseenter/out behaviors (example a menu where hovering one menu item should clear the hover on sibling menu items) then the mouseout delay is negated by the sibling elements having 0 delay for mouseenter

Pull Request #60 adds the ability to specify timeout values for mouseenter as well

I use this plugin a lot when making dropdown menus. Usually with this https://github.com/somatonic/droppy

Since now there's touch events, I had a problem with android pads (ios pads works fine) not recognizing the "hover" event.

I tried to fix it with various techniques and the only one working for all seems to add "touchend" and test for it in the handleHover function to bypass the sensitivity checks for mouseenter.

I attached code here in case you're interested adding it.

...
        // A private function for handling mouse 'hovering'
        var handleHover = function(e) {
            // copy objects to be passed into t (required for event object to be passed in IE)
            var ev = jQuery.extend({},e);
            var ob = this;

            // cancel hoverIntent timer if it exists
            if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

            // if e.type == "mouseenter"
            if (e.type == "mouseenter") {
                // set "previous" X and Y position based on initial entry point
                pX = ev.pageX; pY = ev.pageY;
                // update "current" X and Y position based on mousemove
                $(ob).on("mousemove.hoverIntent",track);
                // start polling interval (self-calling timeout) to compare mouse coordinates over time
                if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

                // else e.type == "mouseleave"
            } else if(e.type == "mouseleave"){
                // unbind expensive mousemove event
                $(ob).off("mousemove.hoverIntent",track);
                // if hoverIntent state is true, then call the mouseOut function after the specified delay
                if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
            }
            // if touch event we don't need intent
            if(e.type == "touchend"){
                cfg.over.apply(ob,[ev]);
            }
        };

        // listen for mouseenter and mouseleave
        return this.on({'mouseenter.hoverIntent':handleHover,
                       'mouseleave.hoverIntent':handleHover,
                       'touchend.hoverIntent':handleHover
                   }, cfg.selector);
...

It would be great..

Setting up hoverIntent with an object to access a dynamic element.
If this dynamic element is removed from dom while hovering (hadnlerIn is triggered and active) the handlerOut is never triggered.

In our case this result in a dropdown box frozen to the screen until refresh.

This issue was closed, but it shouldn't be:
#46

The bug still exists. A jfiddle was already set up to demonstrate this
http://jsfiddle.net/9x1cnteh/2/

• click the alpha button
• click in the input field
  *autocomplete dialog appears. go to select something
• the mouseleave (or mouseout) is triggered, the box closes, and you can't select the autocomplete.

The correct behavior is that the google chrome auto complete doesn't triggered the mouse leave.

Google Chrome: Version 76.0.3809.100 (Official Build) (64-bit)
Mac Mojave: 10.14.6

This is a minor issue, experienced on Chrome 67, Linux.

When a button is given the attribute disabled="disabled" you can "sneak up" on it, if you approach it very slowly it will fail to trigger the "over" event, and hence fail to trigger the "out" event too.
However, if you hover over the element quite quickly, it will trigger the correct events.

At first I though this was normal behaviour, since it seemed it would only trigger on "intent", but I cannot replicate this slow-fast difference in any other state (other than a disabled button), and normal behaviour appears to be that "over" should trigger immediately on any element.

Obviously this is something to do with the disabled attribute, but it doesn't seem like desired functionality to disable hoverIntent for this attribute, nor does that seem to be the case for the "quick" firing scenario.
However, a simple fix may be to declare that disabled is disabled, and you can just use styling to make the button appear disabled with a class if you don't want such functionality.

Specific case:

hoverIntent v1.9.0 // 2017.09.01 // jQuery v1.7.0+
jQuery JavaScript Library v1.12.4
jQuery UI - v1.12.1 - 2018-05-30
Bootstrap v3.3.7

• Using hoverintent() on the parent of a button
• In the "closed" state, only the button is displaying
• On "over" it opens, the button is hidden, and a menu appears
• When in the "disabled" state the button is given a disabled attribute, and the "over" and "out" calls will return empty (or log their presence before return, for debugging)
• On click, a disabled menu will re-enable and open
• I noticed the menu would not then close on "out" (if not hovered on aggressively beforehand)
• Logging the "over" and "out" I notice they were not even triggering in the scenario described
• By elimination I found it would work in every case except when the disabled attribute was present

My fix: luckily, bootstrap's .btn.disabled has the desired behaviour/style without the hoverIntent bug

I tried the following code but no luck

$(document).on('mouseenter.hoverIntent', element, function() {});

Hi, deprecated $.isFunction is used in the library. Can you please consider updating the code?
Here's some information about the deprecation https://api.jquery.com/jquery.isfunction/

Shouldn't it be better using requestAnimationFrame?
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

It could be generally useful if the event passed to the handlers could also hold the current X & Y coordinates of the mouse at the time of firing. This could be added as part of the event.data, or more seamlessly (though potentially an unwanted side-effect for some) copied over the pageX/pageY of the returned event itself. This would make it much easier for those who want their handler to, for example, position something relative to the location of the pointer at the time of firing.

Thoughts? If I have time and there's interest, I can put an example implementation in a pull request.

I used to use this great plugin internally for this project.

Unfortunately, it was firing inadequately on mobiles (very late).
So I reverted to jQuery's hover which fires much quicker but without the faulty behaviour of hoverIntent.

Is it possible to patch this issue? I would love to revert back to hoverIntent then...

I've been using your excellent plugin for years now and had a question about the header comment. The latest release has a section that reads:

You may use hoverIntent under the terms of the MIT license. Basically that
means you are free to use hoverIntent as long as this header is left intact.

Is there any chance you could come up with a shorter version for the minified code? Something like:

/*!
 * hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
 * http://cherne.net/brian/resources/jquery.hoverIntent.html
 *
 * You may use hoverIntent under the terms of the MIT license. 
 * Copyright 2007, 2013 Brian Cherne
 **/

I'm all for well documented code, but people aren't going to be looking for user docs in a minified version of the code and the above change would cut your minified file size down by almost half.

Just an idea.. when moving sideways across a horizontal navigation with many large submenus, It would be less jarring visually to have no delay between the over and out of each submenu.

In other words: hoverintent is useful on the first hover but once the cursor is in the menu there could be a setting to remove the delay ( and act like a normal hover ) between over and out based on if target has same class etc...

Hi,

it would be nice to manipulate hoverIntent with jQuery's .on syntax which offers namespacing and easy unbinding with .off(). When there would be no listeners left, the bindings should be automatically removed to prevent memory leaks (no need for the manual destruction suggested in #43).

$(selector).on('hoverIntent.namespace' [, selector] , handlerIn, handlerOut);
// or
$(selector).on('hoverIntent.namespace' [, selector] , handlerInOut);
// and then
$(selector).off('hoverIntent.namespace');
// or 
$(selector).off('.namespace');

It should be possible to hook on jQuery's event system to make it happen. Thank you

Please contribute Typescript types to the definitleytyped project.

how to import like/in es6 modules?

Hey, maintainer(s) of briancherne/jquery-hoverIntent!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library briancherne/jquery-hoverIntent is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "briancherne/jquery-hoverIntent",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I guess this should be officially added to npm? There are a couple folks who registered unofficial clones, but it might be best to have the official one in the registry, yes?

+1 (or make a pull request!) if you want this to happen. (Maybe pair this with #32?)

Your website still has 1.8.0 even though 1.8.1 has been released

At each polling interval the compare function uses the value of sensitivity option as a distance threshold to determine whether or not to fire handlerIn. The issue is that the distance it is comparing against is the sum of distances moved in each axis, which is not the straight-line distance, but the "Manhattan distance" and not necessarily what is expected.

Could this behavior either be changed (I can make a pull request, if you like) or explained/documented? Thanks!

It would be good (also good plugin practice) to add a destroy() method to remove the hoverIntent bindings on an element or set of elements.

This would take a minimimal amount (3 unminified lines) of code, and the code has already been written here:

• http://stackoverflow.com/questions/8151278/jquery-unbind-or-rebind-hoverintent

While it's possible to just direct users to the StackOverflow question, I think it would be better to include the method inside the plugin to avoid versioning issues in the future, as well as for the sake of promoting plugin modularity (allow for revokable methods).

thanks, this is a great plugin!

If either out or over methods aren't provided or aren't functions, can we not throw exceptions?

I have a mega drop-down menu, which doesn't follow the traditional HTML structure of dropdowns... (the dropdown is not a child of the <li> menu item.)

Here's how my html looks like:

<nav>
<ul class="menu">
<li class="menu-item">
Menu item 1
</li>
</ul>
</nav>
<section id="content">
<div class="dropdown">
<p>my dropdown content is here</p>
</div>

I don't know if you see the problem; I need to have an event handler on the "dropdow" class separately...

Now my code looks like:

      jQuery('.menu-item[data-mlid]').hoverIntent({
        over: hoverIn,
        out: hoverOut,
        sensitivity: 1,
        timeout: 200,
      });
      function hoverIn() {
        var activeitem = $(this).data("mlid");
        $('.paddle-mega-dropdown[data-mlid=' + activeitem + ']').fadeIn("fast");
      }
      // normally the mouseleave event should be handled by ther hoverIntent script
      // but in our case we need to handle it ourselves
      function hoverOut() {
        $('.menu-item[data-mlid], .paddle-mega-dropdown').mouseleave(function(e) {
          var activeitem = $(this).data("mlid");
          var targetElement = e.relatedTarget;
          if ($(targetElement).closest('[data-mlid=' + activeitem + ']').length == 0) {
            $('.paddle-mega-dropdown[data-mlid=' + activeitem + ']').fadeOut("fast");
          }
        });
      }

but I guess that's not how the plugin is supposed to work..

I am facing a compatibility problem when the event is handled:

TypeError: $.event.handle is undefined

on line 120
Apparently jQuery 2.x doesnt have the event.handle property.

I would really appreciate a compatibility fix or something instead of downgrading my jQuery version

Drupal: Version 10

Warning: file_get_contents(libraries/jquery-hoverIntent/jquery.hoverIntent.js): Failed to open stream: No such file or directory in _locale_parse_js_file() (line 1097 of core/modules/locale/locale.module).

Hi
There is a problem with you labrari on cdnjs
please check this conversation and provide solution
thank
cdnjs/cdnjs#11656

Without moving the mouse and scrolling the window, the mouse events are triggered. This happens since the mouse technically isn't moving.

Hello

Could you release a new version?

1.8.1 is dated from 2014 but is still being used in master in 2016...
it's greatly changed if you compare with a diff

I'm getting the following error when I try to install the plugin via bower:

ENOTFOUND Package jquery-hoverintent not found

Any ideas?

Running npm install [email protected] installs a slightly different variation from what I'm seeing in this repo. Compare this file to what is installed by NPM. They are both the same version in the docBlock header, but they each have different file contents.

HoverIntent blows away all previous initialisation.

http://jsfiddle.net/7px1e2kd/1/

Any chance of including a minified version of the file?

That way I can skip a step in my grunt workflow, i.e. just copy the file straight to wherever I need it, rather than having to uglify it first.