You are browsing the latest version of the documentation which is not released yet. See the current stable version instead.

Hover Intent

This JS component is used to add timeout for hover over and hover out events. This component uses hoverIntent plugin from jQuery.

Plugin settings

You can set default values in file assets/js/frontend/components/hoverIntent.js or you can set variables manually by data attributes.

This plugin is binded to elements with class .js-hover-intent

Force click

In some scenarios you need to add hover functionality and simulate click on another element. You can define it by data-hover-intent-force-click="true" and data element with data-hover-intent-force-click-element=".js-element-to-click-class". I makes hover effect with defined interval a calls click event on element with class .js-element-to-click-class.

Javascript default settings

var interval = 200;
var timeout = 200;
var classForOpen = 'open';
var forceClick = false;
var forceClickElement = '';
var linkOnMobile = false;

Html element settings

<div class="js-hover-intent"
data-hover-intent-interval="200"
data-hover-intent-timeout="200"
data-hover-intent-class-for-open="open"
data-hover-intent-force-click="false"
data-hover-intent-force-click-element=""
data-hover-intent-link-on-mobile="false">