Callout Extension for SharePoint 2013 Pages

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 callout control provides a flexible way to engage user. When you do searches in a SharePoint 2013 site, you’ll see examples of the callout control in action, as it pops up whenever you hover over a search result.

Please find more details from MSDN

As you know Callouts are displayed OOB for following Lists & Libraries

• Document Library

• Assert Library

• Images Library

• Pages Library

• Task Lists

So, I extended this to my custom page with a javascript.

Script:

<script type="text/javascript">

//This functions makes the request to the RESTful ListData service

function getListItems(sende,callback, OrderNumber, Element) {

    var Url = "http://servername/_vti_bin/ListData.svc/ElementsHelp()?$filter=OrderNumber eq "+OrderNumber+" and ElementValue eq '"+Element+"'";

    //Create a WebRequest object

    var request = new Sys.Net.WebRequest();

    //Specify the verb

    request.set_httpVerb("GET");

    //Use the URL we already formulated

    request.set_url(Url);

    //Set the Accept header to ensure we get a JSON response

    request.get_headers()["Accept"] = "application/json";

    //Add a callback function that will execute when the request is completed

    request.add_completed(callback);

    //Run the web requests

    request.invoke();

}

function onCompletedCallback(response, eventArgs) {

    //Parse the JSON reponse into a set of objects by using the JavaScript eval() function

    var shelptext = eval("(" + response.get_responseData() + ")");

    //Display some properties

    _elementhelpTitle = shelptext.d.results[0].Title;

    _elementhelpID = shelptext.d.results[0].OrderNumber;

    _elementhelpBody = shelptext.d.results[0].HelpText;

    var launchPoint = document.getElementById("Element"+_elementhelpID);

    var listCallout = CalloutManager.createNew({

        launchPoint: launchPoint,

        beakOrientation: "topBottom",

        contentWidth: 610,

        ID: _elementhelpID,

        title: _elementhelpTitle,

        content: "<div class=\"ms-soften\" style=\"margin-top:4px;\">" 
                        + "<hr/></div>" 
                        + "<div class=\"callout-section\" style=\"margin-top:10px;\">" + _elementhelpBody + "

",             }); 
 listCallout.open();

}

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

});

</script>

Elements Help List:

Usage on page:

< a href="Javascript:getListItems(this, onCompletedCallback, '1', 'Element 1');" id="1">Systems are in place for reporting, investigating, analyzing, communicating and documenting all incidents (including significant near-misses). Analysis is conducted using statistically valid methods </a>

End Results: