This demo shows how you can change the style of annotations.

var sceneId = "08807c98-994b-461a-841c-e893dea9b336";
var api = claraplayer("player");
var labels = ['Default', 'Borderless Red', 'Bordered Blue'];
var fnMap = [null, borderlessRed, borderedBlue];
var initialState = 0;
var annotationSpans = {};
var changed = true;

function borderlessRed(annotation, div) {
  if (changed) {
    emptyDiv(div);
    changed = false;
  }
  var span = annotationSpans[annotation.id];
  if (!span) {
    span = document.createElement('span');
    span.innerHTML = annotation.text;
    div.appendChild(span);
    annotationSpans[annotation.id] = span;
  }
  span.style['pointer-events'] = 'auto';
  span.style.position = 'absolute';
  span.style.left = '' + annotation.left + 'px';
  span.style.top = '' + annotation.top + 'px';
  span.style.color = 'red';
  span.onmouseover = function (ev) {
    ev.target.style.color = 'blue';
  }
  span.onmouseout = function (ev) {
    ev.target.style.color = 'red';
  }
}

function borderedBlue(annotation, div) {
  if (changed) {
    emptyDiv(div);
    changed = false;
  }
  var anno = annotationSpans[annotation.id];
  if (!anno) {
    anno = document.createElement('div');
    var span = document.createElement('span');
    span.innerHTML = annotation.text;
    span.style.color = 'white';
    span.style.padding = '10px'
    anno.appendChild(span);
    div.appendChild(anno);
    annotationSpans[annotation.id] = anno;
  }
  anno.style['pointer-events'] = 'auto';
  anno.style.position = 'absolute';
  anno.style.left = '' + annotation.left + 'px';
  anno.style.top = '' + annotation.top + 'px';
  anno.style.backgroundColor = 'blue';
  anno.style.border = '2px solid blue';
  anno.style.borderRadius = '10px';
}

function emptyDiv(div) {
  var fc = div.firstChild
  while (fc) {
    div.removeChild(fc);
    fc = div.firstChild;
  }
}

api.sceneIO.fetchAndUse(sceneId).then(function() {
  var buttons = document.getElementById('buttons');
  labels.map(function(label, i) {
    var button = document.createElement('button');
    button.innerText = label;
    button.onclick = function(ev) {
      api.annotations.useCustomAnnotationFunction(fnMap[i]);
      annotationSpans = {};
      changed = true;
    }
    buttons.appendChild(button);
  });

document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});