Page / Document preview on mouse hover SP2013 as shown in Search Results
Question
I really like this new functionality of the SharePoint search that shows you a preview on mouse hover. Is there a way to initialize this myself?
If I hover over an anchor tag can I, for example, call a JavaScript function and pass the page URL I want previewed in the flyout? Maybe someone can explain if this is reusable for custom markup.
Edit: Upon further inspection, I notice the search result div has a mouseover
onmouseover="EnsureScriptParams('SearchUI.js', 'HP.Show', 'ctl00_ctl40_g_842f2f47_d8d1_418d_8063_fb213934acf8_csr2_item', 'ctl00_ctl40_g_842f2f47_d8d1_418d_8063_fb213934acf8_csr2_hover', '~sitecollection\u002f_catalogs\u002fmasterpage\u002fDisplay Templates\u002fSearch\u002fItem_Site_HoverPanel.js', false);"
Any tips on reusing this manually?
Solution
Yes, The Display Templates both the Result and the Result Hover are just HTML and JavaScript. The default previews are either generated by Office Web Apps (the WOPI Server) or through the iframe of the site. All you need to do is decide what you want to call and how you want to display the preview.
This post can get you started with the process: http://www.ableblue.com/blog/archive/2013/06/05/introduction-to-sharepoint-2013-display-templates/