Create CalloutActions in Hover Over\Callout Popups in SharePoint 2013

In Continuation with the series on The new Hover Over\Preview\Callout Popups in this post we will look at how to create CallOut Actions the ones that are towards the bottom in a Callout Popups.Before you begin you should take a look at Some Important tips for working with CallOut Popups in SharePoint 2013.

CalloutActionOptions() is one of the methods provided in Callout.Js to let you Create Action like Share,Open,ADD TO TIMELINE that you see in Preview popups of list items. Add the below Script in Script Editor Web Part as we did in Part 1

Script -

<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(CreateCallOutPopup, "callout.js");

function CreateCallOutPopup()
{
var targetElement = document.getElementById('NotificationDiv');
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="NotificationDiv" style="width:30px;"><span id="ms-pageDescriptionImage">&#160;</span> </div>

The Resulting Screen should look like below -

When clicked the Action ‘ACTION 1′ displays a JavaScript alert.

See the Complete Tutorial at SharePoint 2013 CallOut Popup Tutorial