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.
$(document).ready(function(){
mycallOuts();
});
<script>
function mycallOuts(){
SP.SOD.executeFunc("callout.js ", "Callout", function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext');
var _getstatusid = document.getElementById("calSt atus");
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>'
});
});
}
</script>
HTML Form
<tr>
<td>Status of Current Task <span id='calStatus'><span>
<img src="http://dotnetsharepoint.c om/sites/SharePoint/SiteAssets /tooltipimage.png"/></span></ span></td>
<td><span class="myownclass" data-displayName="Status"></sp an></td>
</tr>