I want to show the hover panel on a page that is NOT the search page. I have a div as shown below: enter image description here

I want it so that when I hover over the box, it shows the hover panel. I have been using Inspect Element on the search page to see how it has been implemented but I dont know how to make it work.


1 Answer 1


You need to look into Callout.js. This contains the CalloutManager class which handles callouts/hover panels within SharePoint.

If you would like to try this out, use a Script Editor web part on a SharePoint page and copy paste the code below:

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(CreateCallOutPopup, "callout.js");
function CreateCallOutPopup()
var targetElement = document.getElementById('NotificationDiv');
// configure options
var calloutOptions = new CalloutOptions();
calloutOptions.ID = 'notificationcallout';
calloutOptions.launchPoint = targetElement;
calloutOptions.beakOrientation = 'leftRight';
calloutOptions.content = 'content';
calloutOptions.title = 'title';
var callout = CalloutManager.createNew(calloutOptions);

<div id="NotificationDiv" style="width:50px;"><span id="ms-pageDescriptionImage">&#160;</span> </div>

Save and Publish the page and you will see the Callout.js in action.

enter image description here

Here is some detailed information on the callout classes and attributes: https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/highlight-content-and-enhance-the-functionality-of-sharepoint-hosted-sharepoint

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.