SharePoint 2013 How To Javascript Jquery Callout Manager

0.md

SharePoint 2013 How To Javascript Callout Manager

Callouts in SharePoint 2013 are now possible with minimal client side scripting thanks to the new callout.js framework. The fastest method is to embed the code into a code web part.

Useful MSDN starter topic: https://msdn.microsoft.com/en-us/library/office/dn135236%28v=office.15%29.aspx

In summary:

1. Make sure to use SP.SOD.executeFunc to call your code when the callout framework has been loaded.
2. Get an element as launchpoint from the document. If the element is dynamically created via javascript, a DOM get_element is necessary to correctly reference the launchpoint.
3. Configure callout options, id and launchpoint are mandatory
4. Create the callout

Check attached files for usage examples.

AddCalloutTip.js

// Add a collout tip and title to the document element
// with given id

function AddCalloutTip(id, tip, title){
	
	// get the launchpoint element of the callout
	var launchpoint = document.getElementById(id);
	
	// configure Callout options
	var calloutOptions = new CalloutOptions();
	calloutOptions.ID = id;
	calloutOptions.launchPoint = launchpoint;
	calloutOptions.beakOrientation = 'leftRight';
	calloutOptions.content = tip;
	calloutOptions.title = title;
	calloutOptions.openOptions = {event: "hover"};

	// call the CalloutManager to create the callout
	var callout = CalloutManager.createNew(calloutOptions);
}

EmbedCallout.html

<script type="text/javascript">

function AddCalloutTip(id, tip, title){
	// ...
}

SP.SOD.executeFunc("callout.js", "Callout", function () {
	var tip = '<p>Callout Text</p>';
	var title = 'Callout Title'
	var id = 'dom_element_it'
	AddCalloutTip(id, tip, title);
});
</script>