Sharepoint 2013 create custom callouts

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. This is very light weight Ui that shows item, user information and shows actions.

here is the images shows some of the Callouts in SharePoint 2013.
For a document Library,

Task list,

Structure:
In the Callout structure, 

Title: Title area of the Callout 

Content: Content Area to show content.

Close: Close button, that to close the popup. we can close callout by using close button, clicking on out side the Callout and pressing escape button.

Beak: Way to show the callout. Here we have two options, Top to Bottom, Left to Right. Means when we click/hover on the link the way that callouts shows.  Callouts can show Top to Bottom, Left to right.

SharePoint 2013 - Callouts:
In SharePoint 2013, we have special JS files to run callouts. Callout.js, is the main JavaScript file for callouts in share point 2013. All the java script files will be located under 15/layouts folder.Here is image shows the values in debugging mode.

How to create: 
Create an Html element as launch point for the callout. This is the source (click/hover) for calling callout popups. 

<div id="calloutLaunchPoint">callout Launch Point</div>

Configure the options for callout. Choose the HTML element for callout and configure the options for callout. To Specify the configuration option we need to call CalloutOptions class.

<script type="text/javascript">
var calloutOptions = new CalloutOptions(); 
calloutOptions.ID = 'calloutID'; 
calloutOptions.launchPoint = calloutLaunchPoint; 
calloutOptions.beakOrientation = 'leftRight'; 
calloutOptions.content = 'content'; 
calloutOptions.title = 'title'; 
var callout = CalloutManager.createNew(calloutOptions);
</script>

here is the simple code to create a custom callout. Copy the code and paste the code in page.

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(CallOut, "callout.js");
function CallOut()
{
var targetElement = document.getElementById('calloutLaunchPoint');
var calloutOptions = new CalloutOptions();
calloutOptions.ID = 'notificationcallout';
calloutOptions.launchPoint = targetElement;
calloutOptions.beakOrientation = 'topbottom';
calloutOptions.content = 'content';
calloutOptions.title = 'title';
var callout = CalloutManager.createNew(calloutOptions);
}
</script>
<div id="calloutLaunchPoint">callout Launch Point</div>
Code must be placed in Embedded

Here is the image that shows the callout.

CallOut Actions: Actions options configured Through CallOutActionOptions object
In Actions we have options below, 

Text: Required Option.

OnClickCallBack: Is a function that handles the action click event. If we don't want any menu options, this is required. it has two parameters, slandered HTML DOM and 
action

Here is the code for launch Action item in Callouts.

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(CreateCallOutPopup, "callout.js");
function CreateCallOutPopup()
{
var targetElement = document.getElementById('LaunchCallout');
var calloutOptions = new CalloutOptions();
calloutOptions.ID = 'notificationcallout';
calloutOptions.launchPoint = targetElement;
calloutOptions.beakOrientation = 'leftRight';
calloutOptions.content = 'content';
calloutOptions.title = 'title';
var displayedPopup = CalloutManager.createNew(calloutOptions);
var customAction = new CalloutActionOptions();
customAction.text = 'Action 1';
customAction.onClickCallback = function(event, action)
{
alert("This is JavasCript alert on Custom Action");
};
var _newCustomAction = new CalloutAction(customAction);
displayedPopup.addAction(_newCustomAction);
}
</script>
<div id="LaunchCallout">Launch Callout</div>

[Code must be in Embedded as explained above.]

it will show the image as

I'll show drop down option in callouts in my next post.