How do I programmatically trigger "hoverintent" on an element

I am using Tristen Brown's hoverintent library, which is a pure Javascript version of the jQuery hoverIntent library.

I have two elements first and second.

The second element has hoverintent handlers which causes a tooltip to appear above that element. When I manually hover over second, the tooltip appears as expected.

I would like to trigger the tooltip of second programmatically. For example, to make interacting with the first element cause the tooltip of the second element to appear. I have attempted to do this using jQuery trigger. I am able to trigger mouseover handlers, but not any hoverIntent.

Any suggestions?

Here is my Javascript:

$( document ).ready(function() {
  var first = document.getElementById('first');
  var second = document.getElementById('second');

  $(first).mouseover(function(){
    $(second).trigger({ type:"mouseover", clientX:"350", clientY:"105" });
    $(second).trigger({ type:"mousemove", clientX:"350", clientY:"105" });
  });

  hoverintent(second, function(e) {
    this.className = 'on';
  }, function(e) {
    this.className = 'off';
  });

  $(second).mouseover(function(){
    console.log("mouseover");
  });
});

Here is my HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src='http://tristen.ca/hoverintent/dist/hoverintent.min.js'></script>

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div style="padding:100px;">
    <ul class='examples'>
      <li id='first'>
        Trigger
      </li>
      <li id='second'>
        hoverintent
        <span class='popup'>Hi there</span>
      </li>
    </ul>
  </div>
</body>

</html>

The full JS bin is here:

http://jsbin.com/kumeva/4/edit?js,output

Solution

I would like to trigger the tooltip of second by mousing over the first element.

You can dispatch a sequence of mouse events to #second and keep the hoverintent code and the dispatch code completely separate like this:

// Hoverintent code
$(document).ready(function() {
  var second = document.getElementById('second');
  hoverintent(second, function(e) {
    this.className = 'on';
  }, function(e) {
    this.className = 'off';
  });
});

///////////////////////////////////

// Dispatch code
$(document).ready(function() {
  var first = document.getElementById('first');
  var second = document.getElementById('second');
  $(first).on("mouseover", function(){
    // Send a mouseover to wake hoverintent
    var event = new MouseEvent("mouseover");
    second.dispatchEvent(event);

    // Send a mousemove trigger the internal hover code
    event = new MouseEvent("mousemove");
    second.dispatchEvent(event);
  });

  $(first).on("mouseout", function(){
    // Cancel the hover code
    var event = new MouseEvent("mouseout");
    second.dispatchEvent(event);
  });
});

How do I programmatically trigger "hoverintent" on an element

Demo