Callouts popups example in SharePoint 2013 in Javascript

<script type="text/javascript" src="/_layouts/15/callout.js"></script>

<script type="text/javascript">

//This functions makes the request to the RESTful ListData service
function getListItems() {

var Url = "https://SPSite/_vti_bin/ListData.svc/Announcements";

//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(onCompletedCallback);


//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 announcements = eval("(" + response.get_responseData() + ")");

var newAnnouncement = document.createElement("div"); 

for (var i = 0; i < announcements.d.results.length; i++) {

//Display some properties
_announTitle = announcements.d.results[i].Title;
_announID = announcements.d.results[i].Id;
_announBody = announcements.d.results[i].Body;

announcementsList.appendChild(newAnnouncement); 

var calloutLink = document.createElement("div"); 
            calloutLink.id = _announID; 
            calloutLink.onmouseover = function () { 
                curListUrl = this.id; 
            } 

calloutLink.innerHTML = "<div class=\"ms-commandLink\" style=\"text-align: left;font-size: 14px;\"><b>" + _announTitle + "</b><br/><br/></div>"; 

announcementsList.appendChild(calloutLink); 

var listCallout = CalloutManager.createNew({ 
                launchPoint: calloutLink,
                beakOrientation: "leftRight", 
                ID: _announID, 
                title: _announTitle, 
                content: "<div class=\"ms-soften\" style=\"margin-top:13px;\">" 
                        + "<hr/></div>" 
                        + "<div class=\"callout-section\" style=\"margin-top:13px;\">" + _announBody + "</div>", 
            }); 

}

}


</script>

<div id="announcementsList"></div>
<a href="Javascript:getListItems()">Click Here to Display Announcements</a>