SharePoint 2013 Creating custom callouts

In this article we explore In SharePoint 2013, Microsoft has introduced a new Framework to Create CallOuts that is somewhat similar to the Dialog Framework Introduced in SharePoint 2010. The SharePoint 2013 Callouts provide a rich but lightweight details experience for the users. Callouts are used, for example, in document libraries. A callout displays a limited, but important, amount of the information about an item. In the document library case, the callout houses some contextual information to allow users to get a preview of the details as well as a set of frequently used commands for users to act on. Many SharePoint 2013 features make use of callouts

Read some SharePoint 2013 tutorials below:

Known limitations of the callout behavior are:
– SharePoint does not display callouts for external content sources.
– SharePoint does not generate callouts when rendering in UI Version 14 mode.
– SharePoint only displays callouts for specific lists, depending on the list’s template

Important to know:
– SharePoint Callout is only for SharePoint server 2013.
– Callout can be displayed for the following SharePoint Lists:
1. Assert Library.
2. Document Library.
3. Task Lists.
4. Pages Library.
5. Images Library.

– Callout cannot be displayed for the following SharePoint Lists:
1. Custom Lists.
2. Announcements Lists.
3. Calendar List.
4. Discussions List.

– SP.SOD.executFunc must contain all the SharePoint Callout implementation code.
– JavaScript and JQuery skills must be expert in order to deliver a professional SharePoint Callout.

Step 1: Navigate to your SharePoint 2013 site.

Step 2: From this page select the Site Actions | Edit Page.

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button”.

Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following

<script type=”text/javascript”>

SP.SOD.executeFunc(“callout.js”, “Callout”, function () {

var _link = document.getElementById(“AboutusLink”);

var listCallout = CalloutManager.createNew({

launchPoint: _link,

beakOrientation: “leftRight”,

ID: “CallOut ID”,

title: “Callouts About Us”,

content: “<div class=\”ms-soften\” style=\”margin-top:2px; \”><hr/></div>”

+ “<div id=’confirmationBLOCK’ style=\”margin-top:13px;visibility:hidden;\”>Thank you for Contacting Us!</div>”

+ “<div class=\”callout-section\” style=\”margin-top:2px;width:95%;Height:200px; \”><span id=’CommentsArea’ style=\”width:100%;height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;\”>Callout pop up is one more UI change in SharePoint 2013. Metro UI was introduced in share point 2013 and one of the new concept is Callouts …</span ></div>”,




<div id=”AboutusLink” style=”width:38%;”><u><span class=\”ms-commandLink\” style=\”text-align: left;font-size: 14px;\”>Callouts About Us</span></u></div>

custom callouts in SharePoint 2013

custom callouts in SharePoint 2013

Finally the result show look as below:

SharePoint 2013 create custom callouts

SharePoint 2013 create custom callouts

Hope this SharePoint article will be helpful.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)


Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.