I want to use a WebPageHoverPanel item on the homepage of my sharepoint site so that when the button (an image) is hovered over, it displays a snapshot of the webpage that the button takes you to. Just like what happens when you 'search' for pages using the search function. Please see the images below.

I've tried using some HTML and CSS popup commands but I can't get it to work on the sharepoint site.

This is what I want to appear (preview of the linked webpage, in this example, the systems webpage, highlighted in yellow):


To appear when the mouse is hovering over this image on the homepage:

enter image description here

The image on the homepage uses this code:

<a href="SystemsWebpageURL"><img src="/SiteAssets/SitePages/Home/SystemsButton.jpg" alt="SystemsButton.jpg" data-themekey="#" class="ms-rteImage-0" style="margin: 5px; width: 1936px; height: 779px;"/></a>​ 

If you know how to do this within sharepoint, or at least recreate the effect, it would be very appreciated!


I have the following code, which produces the image as the launch point, the callout works when I change the value of openOptions to a click, and then upon clicking the image the cllout appears:

calloutOptions.openOptions = {event: "click", showCloseButton: true};

however, when I use the hover value for "event", the callout does not appear when the image is hovered over or clicked.

Full code:

<script type="text/javascript" src="https://code.jquery.com/jqu...">

<script type="text/javascript">
$(document).ready(function() {

ExecuteOrDelayUntilScriptLoaded(CreateCallOutPopup, "callout.js");

function CreateCallOutPopup()
var targetElement = document.getElementById('SystemsCallout');

var calloutOptions = new CalloutOptions();
calloutOptions.ID = 'notificationcallout';
calloutOptions.launchPoint = targetElement;
calloutOptions.beakOrientation = 'leftRight';
calloutOptions.content = 'content';
calloutOptions.title = 'title';
calloutOptions.openOptions = {event: "hover", showCloseButton: true};

var callout = CalloutManager.createNew(calloutOptions);

<span id="SystemsCallout"> <img 
alt="SystemsButton.jpg" data-themekey="#" class="ms-rteImage-0" 
style="margin: 5px; width: 470px; height: 189px;"/>​</span>

Please help!

1 Answer 1


SharePoint Online supports Callout Control. Callout framework can display a dialog with specific content as you want.

You need to use the CalloutManager method in callout.js to creates a custom SharePoint Callout for achieving your requirement.

Use {event: "hover", showCloseButton: true} openOptions member to make the Callout appear when the user hover over the element, and disappear when the user click on the X button in the upper right corner.

A demo about how to create a custom Callout:


More information about Callout:


It also works in SharePoint Online.

  • Hi, please see my update on the above post. The click function seems to work; however when I change the event to hover, the callout is nowhere to be seen!
    – PythonBen
    Commented Jan 11, 2018 at 11:28

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.