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.
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 old_Hide.call(); //Call original function } /* Override show function */ var old_Show = HP.Show; HP.Show = function(d, a, b, c) { var self = this; timeout = setTimeout(function(){ old_Show.call(self, 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.
