Create Custom Callout Menu In SharePoint Server 2016

SharePoint 2013 introduced Callout Menu which was an added functionality in addition to the existing modal pop up framework. With Callout Menu, we can display the information in a Metro UI format.

As per MSDN definition of Callout, “These provide relevant contextual information and actions around a particular item. Callouts are generally used to show the user more information or actions about an item in a lightweight UI. If scrollbars or user input are necessary, the callout is probably not a good choice.”

SharePoint has Out-of-the-Box Callouts which we can see when we go to a list item.



The basic purpose of the Callout menu is to provide contextual information about an object. We can also create custom Callout menu using JavaScript Object Model. In order to facilitate this, we have been provided with the Callout.js library in SharePoint.

Just like the Dialog Framework is supported by ModalDialog.js file, we have Callout.js file supporting the Callout Framework and it resides within the LAYOUTS folder. It contains definitions for Callout Manager. Whenever we want to create a new custom Callout, we will have to first create an instance of the Callout Manager and pass the required parameters to that.

In this article, we will see how to create a custom Callout. The below code creates a custom Callout that will be displayed upon hovering of the HTML element.



Callout Menu Working

Here, the HTML Div Element whose hovering should invoke the Callout is given the id ”LaunchCallout”. The major chunk of the JSOM code is defined within the main function “createSharePointCallOutPopup”. However, it should be invoked only after Callout.js has been loaded to the page. This is ensured by the SP.SOD.ExecuteFunc() call.

• Id – Calloutmenu ID
• LaunchPoint – HTML Div element where callout menu should appear
• BreakOrientation – Allignement of the callout menu
• Content – CallOut menu structure and content to display
• Title – Callout menu title.

Custom Callout Menu Code

The below code shows a fully functional Callout menu that will be invoked on hover of the Div Element “C# Corner Contacts”