<script type='text/javascript'>
function InitCallout()
{
var launchPoint = document.getElementById('launchPoint');
var calloutOptions = new CalloutOptions();
calloutOptions.ID = 'calloutID';
calloutOptions.launchPoint = launchPoint;
calloutOptions.beakOrientation = 'leftRight';
calloutOptions.content = 'content';
calloutOptions.title = 'title';

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

// subscribe to the 'opening' event. There's also 'opened', 'closing' and 'closed' events
// calloutObject param is the same callout
callout.addEventCallback('opening', function(calloutObject){
    // we need to work with this specific element because there are additional markup
    //for title and for close button and we don't want to break it
    var contentWrapperId = 'co' + calloutObject.getID() + '_callout-body';
    document.getElementById(contentWrapperId).innerHTML = '<div>' + new Date().toString() + '</div>';
});

}

_spBodyOnLoadFunctionNames.push('InitCallout');
</script>
<div id='launchPoint' style='width: 100px;'>Launch point</div>