How to disable hoverIntent in WordPress 3.3 admin

Where is Hover Intent attached to the menus in WordPress core?

The following 2 files go about attaching hoverIntent as click handlers for the bar and menu respectively.

Admin Bar
The admin-bar.js file sets up Hover Intent on the top bar here on line 13 of admin-bar.js.

Admin Menu
The common.js file sets up Hover Intent on the side bar menu on line 185 of common.js.

How to remove HoverIntent from both the bar and menu

WordPress attaches the hoverintent handlers for the bar and menu on document ready, so if we’re going to rebind those click handlers we need to make sure we do so after WordPress has done it’s JS business.

The easiest way to ensure our script loads at the right time is to fire an enqueue in the admin and setting admin-bar and common scripts as dependancies.

Enqueue in admin head setting required dependancies

Attach a callback to admin_head and fire an enqueue with the two required dependancies.

add_action( 'admin_head', 'disable_admin_hoverintent' );

function disable_admin_hoverintent() {
    wp_enqueue_script( 
        // Script handle
        'disable-admin-hoverintent', 
        // Script URL
        get_bloginfo( 'stylesheet_directory' ).'/disableadminhi.js', 
        // Script dependancies
        array( 'admin-bar', 'common' ) 
    );
}

Create the custom Javascript file

Create a file in your theme’s folder and name it to match the file in the above enqueue, in my example i’ve used the name disableadminhi.js, but you’re welcome to adjust that and/or repoint the enqueue to somewhere else if you don’t want to place it in the theme’s folder.

Javascript for disableadminhi.js

jQuery(document).ready(function($){
    $('#wpadminbar').find('li.menupop').hover( function(){
        $(this).toggleClass('hover');
    });
    // Bring menu into scope(defined by common.js in wordpress)
    var menu;
    // Copy of the function from common.js, just without hoverIntent
    $('li.wp-has-submenu', menu).hover(
        function(e){
            var b, h, o, f, m = $(this).find('.wp-submenu'), menutop, wintop, maxtop;

            if ( !$(document.body).hasClass('folded') && $(this).hasClass('wp-menu-open') )
                return;

            menutop = $(this).offset().top;
            wintop = $(window).scrollTop();
            maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar

            b = menutop + m.height() + 1; // Bottom offset of the menu
            h = $('#wpwrap').height(); // Height of the entire page
            o = 60 + b - h;
            f = $(window).height() + wintop - 15; // The fold

            if ( f < (b - o) )
                o = b - f;

            if ( o > maxtop )
                o = maxtop;

            if ( o > 1 )
                m.css({'marginTop':'-'+o+'px'});
            else if ( m.css('marginTop') )
                m.css({'marginTop':''});

            m.addClass('sub-open');
        },
        function(){
            $(this).find('.wp-submenu').removeClass('sub-open');
        }
    );
});

Enjoy faster navigation!

Hope that helps.. 🙂