Delaying the SharePoint Hover Panel

Posted 15 February 2018 12:00 AM by Ian Jackson, Front End Solutions Architect @ ClearPeople

The SharePoint search results webpart displays a hover panel when the user hovers on a result item.

This hover event action, depending on the result type, can display text, images, or document previews which can take it's toll on the browser while loading the hover panel content.

hover animation

To resolve this we are going to add some code which will delay the hovel panel from loading. This will ensure the panel will not appear if the user moves the mouse over the item unintentionally.

The default code for the hovel panel can be found in SearchUI.js. There are two functions which are of particular interest.

Show() and Hide()

These are the functions which are called when the user hovers over and out of the result item.

We are going to override these functions.

SP.SOD.executeOrDelayUntilScriptLoaded(function() {
    var timeout;

    /* Override hide function */
    var old_Hide = HP.Hide;
    HP.Hide = function(){
        if (timeout) clearTimeout(timeout); //Cancel the timeout delay; //Call original function

    /* Override show function */
    var old_Show = HP.Show;
    HP.Show = function(d, a, b, c) {
    	var self = this;
        timeout = setTimeout(function(){
  , d, a, b, c); //Call original function
        }, 1000); //Timeout delay for 1 second
}, 'SearchUI.js');

In the code snippet above we are using a timeout to delay the original function from executing. On mouse over, the timeout is created and on mouse off, the timeout is cleared.


Add your comment





intranet Modern SharePoint teamwork employee engagement digital workspace SharePoint JavaScript Windows Azure Digital Transformation staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics jquery QA Quality Assurance testing content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath