Create CallOuts in SharePoint

Create CallOuts in SharePoint
In this article we can able to see how to use callouts in SharePoint

In my requirement  having a status column having multiple drop down values , i will need to explain about the values available in the drop down.

For that i used Callouts which is newly introduced in SharePoint2013.


function mycallOuts(){
SP.SOD.executeFunc("callout.js", "Callout", function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext'); 
         var _getstatusid = document.getElementById("calStatus");
         var listCallout10 = CalloutManager.createNew({ 
         launchPoint: _getstatusid,
         beakOrientation: "leftRight", 
         ID: "CallOutID", 
         content: '<b>Red</b> <br>Rejected<br></br> <b>Green</b> <br>No Action Requried<br><br>'

HTML Form 

<td>Status of Current Task <span id='calStatus'><span>
 <td><span class="myownclass" data-displayName="Status"></span></td>