Popup ol

HTML

<script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css">
<div id="map" class="map">
  <div id="tooltip" class="tooltip"></div>
</div>

CSS

.tooltip {
  position: relative;
  padding: 52px;
  background: rgba(0, 0, 4, 0.5);
  color: white;
  opacity: 0.7;
  white-space: nowrap;
  font: 10pt sans-serif;
}

JavaScript

var geojsonObject = {
       'type': 'FeatureCollection',
       'crs': {
        'type': 'name',
        'properties': {
         'name': 'EPSG:3857'
        }
       },
       'features': [{
        'type': 'Feature',
        'properties': {
         'name': 'Triangle',
         'prop1': 0.0
        },
        'geometry': {
         'type': 'Polygon',
         'coordinates': [
          [
           [-5e6, -1e6],
           [-4e6, 1e6],
           [-3e6, -1e6]
          ]
         ]
        }
       }]
      };

      var vectorSourceJSON = new ol.source.Vector({
       features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
      });



      var vectorLayerJSON = new ol.layer.Vector({
       source: vectorSourceJSON,
       //style: styleFunction
      });

      //---

      var vectorLayer = new ol.layer.Vector({
       source: new ol.source.Vector({
        url: '//openlayers.org/en/v3.14.2/examples/data/geojson/countries.geojson',
        format: new ol.format.GeoJSON()
       })
      });

      var map = new ol.Map({
       layers: [
        new ol.layer.Tile({
         source: new ol.source.MapQuest({
          layer: 'sat'
         })
        }),
        vectorLayer,
        vectorLayerJSON
       ],
       target: 'map',
       view: new ol.View({
        center: [0, 0],
        zoom: 1
       })
      });

      var tooltip = document.getElementById('tooltip');
      var overlay = new ol.Overlay({
       element: tooltip,
       offset: [10, 0],
       positioning: 'bottom-left'
      });
      map.addOverlay(overlay);

      function displayTooltip(evt) {
       var pixel = evt.pixel;
       var features = [];
       map.forEachFeatureAtPixel(pixel, function(feature) {
        
        features.push(feature);
        
       });
       //tooltip.style.display = feature ? '' : 'none';

       if (features.length > 0) {
        overlay.setPosition(evt.coordinate);
        tooltip.innerHTML = '';
        for (var i = 0, ii = features.length; i...