Sharepoint Online WebPageHoverPanel on a Hyperlinked Image

Question

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:

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!

UPDATE

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>

<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);
}
});
</script>



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

Please help!

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:

http://www.c-sharpcorner.com/article/create-custom-callout-menu-in-sharepoint-server-2016/

More information about Callout:

http://www.learningsharepoint.com/2013/05/09/sharepoint-2013-callout-popup-tutorial/

It also works in SharePoint Online.