This demo shows how you can change the position and content of annotation.

var sceneId = 'ba27edd2-8037-47e8-ab71-112e52053fac';
var api = claraplayer('player');
var annotationSpans = {};
var annotationPosition = ['Top-Left', 'Bottom-Right'];
var annotationContent = ['Name','Position'];
var meshes;
var positionSelect = document.getElementById('positionSelect');
var contentSelect = document.getElementById('contentSelect');
var makeSelection = false;

api.sceneIO.fetchAndUse(sceneId).then(function(){
  meshes = api.scene.filter({type:'PolyMesh'});
  annotationPosition.map(function(position, i){
    positionSelect.options[i] = new Option(position,position);
  });
  annotationContent.map(function(content,i){
    contentSelect.options[i] = new Option(content,content);
  });
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
  positionSelect.onchange = changeHandler;
  contentSelect.onchange = changeHandler;
  changeHandler();
})

function changeHandler() {
  annotationSpans = {};
  makeSelection = true;
  api.annotations.useCustomOverlayFunction(function(div) {
    if(makeSelection){
      var spans = div.getElementsByTagName('span');
      for(var span in spans){
        spans[span].innerHTML='';
      }
    }
    makeSelection = false;
    meshes.forEach(function(id,i){
    var position = api.scene.getScreenPosition(id);
    var span = annotationSpans[id];
    if(!span){
      span = document.createElement('span');
      span.setAttribute('id','span'+i);
      span.innerHTML = contentSelect.value === 'Name' ? api.scene.get({id:id, property:'name'}) : positionObjectToString(api.scene.get({id:id, plug:'Transform',property:'translation'}));
      div.appendChild(span);
      annotationSpans[id] = span;
    }
    span.style['pointer-events'] = 'auto';
    span.style['background-color'] = '#fff';
    span.style.position = 'absolute';
    span.style.left = positionSelect.value === 'Top-Left' ? ''+position.left+'px' : ''+(position.left+position.width*0.8)+'px';
    span.style.top = positionSelect.value === 'Top-Left' ? ''+position.top+'px' : ''+(position.top+position.height*0.8)+'px';
    });
  });
}

function positionObjectToString(position){
  return '['+position.x+', '+position.y+', '+position.z+']'
}