How do I programmatically trigger "hoverintent" on an element

Question

How do I programmatically trigger "hoverintent" on an element

1.4k Views Asked by Chanpory At 02 June 2015 at 06:53

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

Original Q&A

There are 2 best solutions below

Remy Grandin On 02 June 2015 at 07:00

According to the source code of the librairy, it seam that it rely on mouseover and mouseout. To determine the mouse position, it seam to use clientX and clientY, not pageX/Y.

Source file : https://github.com/tristen/hoverintent/blob/gh-pages/index.js

**Drakes** · Accepted Answer · 2015-06-02T07:00:46.127000

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

There are 2 best solutions below

Demo

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HOVERINTENT

Trending Questions

Popular # Hahtags

Popular Questions