Summary : The new Hover Over\Preview\Callout Popups in SharePoint 2013,Create Callouts in SharePoint 2013,sharepoint 2013 callout,Create sharepoint 2013 callouts,”sharepoint 2013″ callout for library,sharepoint 2013 callout.js
Microsoft has added new a Framework for Creating Callouts (Notification or Hover Over Popups) in SharePoint 2013. These CallOuts gets displayed in few of the Lists and Libraries and in Search results as Preview Panes.
Here is a typical Notification Callout.
Here is a Task Item Callout .
The good news is that these CallOuts or Hover Over Popups Can be fully Customized. This is a huge advantage for developers since the callout framework is supported Out of the Box.Before we begin with detailed examples on how to Create and Customize CallOuts , you must read Some Important tips for working with CallOut in SharePoint 2013.
CalloutManager – This is a new class to help Create CallOuts\Hover Popups in SharePoint 2013. CalloutManager allows to get or create an instance of the callout and manage its state. Similar to “Options” in Modal Dialog Framework users can set parameters using CalloutOptions for creating a new CalloutManager type Popup.
Lets look at two examples of Creating a Callouts using CalloutManager.
Example 1 – We will Create a Custom Popup similar to Notification Popup in Screen 1 above.
To Create a Notification Image we will use the following span.
<span id="ms-pageDescriptionImage"> </span>
1. Edit a SharePoint Page and add a Script Editor WebPart (using Embed Code) to it.
2. Add the following in your Script Editor.
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"> </span> </div>
3. Once you add the code save & publish the Page. The Resulting popup will be
Next we will look at how to Create CalloutActions( Open, Share, Edit…) in Callouts – SharePoint 2013 >>
see Also : SharePoint 2013 CallOuts Tutorial & Examples