How to invoke the mouseenter event programmatically via jquery

Question

In my html structure I have one anchor tag element which has hoverIntent plugin event attached.

     $('a').hoverIntent(function(event){// some code to show popup;})

Whenever I hover on the anchor tag manually it does some ajax call and brings back the data from service and shows popup.

I want to trigger the mouseenter/hover/mousemove (anything which can bring the popup) from code (without any manual action)

I tried basic jquery functions like

   $('selector').trigger('hover') and
   $('selector').trigger('mouseenter')

But nothing worked, Is this possible to invoke the hover/mouseenter functionality without users interruption?

Answer 1

The hoverIntent jQuery plugin uses both mouseenter and mousemove events to determine whether to fire or not. If you simply trigger the mouseenter event nothing will happen because of this.

You'll need to first call the mouseenter event and include a mouse position. Then you need to call the mousemove event, also including the mouse position.

This jsbin shows the example. If you hover the "Hover me" item without first hovering the green box, nothing happens. Is you hover the green box to make it red, the "hover me" link will work afterwards. To trigger this programmatically without first hovering the green box, use these calls:

var e = $.Event('mouseenter');
e.pageX = 50;
e.pageY = 50;
$("#testing").trigger(e);

var e2 = $.Event('mousemove');
e2.pageX = 50;
e2.pageY = 50;
$("#testing").trigger(e2);