ol3 measuring live dynamic

from http://gis.stackexchange.com/questions/167052/popup-overlays-on-draw-measure-with-openlayers-3 http://gis.stackexchange.com/questions/167052/popup-overlays-on-draw-measure-with-openlayers-3

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://openlayers.org/en/v3.10.1/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.10.1/css/ol.css">
<div class="row-fluid">
    <div class="span12">
        <div id="map" class="map"></div>
    </div>
</div>
<form class="form-inline">
    <label>Geometry type &nbsp;</label>
    <select id="type">
        <option value="None">None</option>
        <option value="LineString">Length</option>
        <option value="Polygon">Area</option>
    </select>
</form>

CSS

.tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
}
.tooltip-measure {
    opacity: 1;
    font-weight: bold;
}
.tooltip-static {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
}
.tooltip-measure:before, .tooltip-static:before {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content:"";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
}
.tooltip-static:before {
    border-top-color: #ffcc33;
}

JavaScript

var wgs84Sphere = new ol.Sphere(6378137);
var raster = new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'sat'})
});
var draw;
var source_mesure = new ol.source.Vector();
var vector_mesure = new ol.layer.Vector({
  source: source_mesure,
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    }),
    stroke: new ol.style.Stroke({
      color: '#ffcc33',
      width: 2
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: '#ffcc33'
      })
    })
  })
});

var sketch;
var measureTooltipElement;
var measureTooltip;
    
var pointerMoveHandler = function(evt) {
  if (evt.dragging) {
    return;
  }};
    
var map = new ol.Map({
  layers: [raster, vector_mesure],
  target: 'map',
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 15
  })
});

map.on('pointermove', pointerMoveHandler);

var typeSelect = document.getElementById('type');



function addInteraction() {
    var type = typeSelect.value;
    if (type !== 'None') {
        draw = new ol.interaction.Draw({
            source: source_mesure,
            type: /** @type {ol.geom.GeometryType} */ (type),
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 0, 0.5)',
                    lineDash: [10, 10],
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 5,
                    stroke: new ol.style.Stroke({
                        color: 'rgba(0, 0, 0, 0.7)'
                    }),
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    })
                })
            })
  });
  map.addInteraction(draw);
        var listener;
        
  
  draw.on('drawstart',
     ...