javascript - Openlayers 3 でポップアップを開く

Question

Google マップ コンポーネントのようなコンポーネントを作成したいと考えています。このコンポーネントでは、スクロール バンドの画像をクリックすると、マップがその写真に飛び、ポップアップで開きます。

これまでのところ、このポップアップ作業を使用しています:

<div id="map" class="map" style="height: 100%; width: 100%;">
  <div id="popup">
</div>

そして、これを使用してポップアップを開くことができます：

var element = document.getElementById('popup');
var popup = new ol.Overlay({
  element: element,
  positioning: ol.OverlayPositioning.BOTTOM_CENTER,
  stopEvent: false
});
map.addOverlay(popup);

map.on('singleclick', function(evt) {
  map.getFeatures({
    pixel: evt.getPixel(),
    layers: vectorLayers,
    success: function(layerFeatures) {
      var feature = layerFeatures[0][0];
      if (feature) {
        var geometry = feature.getGeometry();
        var coord = geometry.getCoordinates();
        popup.setPosition(coord);
        $(element).popover({
          'placement': 'top',
          'html': true,
          'content': feature.get('desc')
        });
        $(element).popover('show');
      } else {
        $(element).popover('destroy');
      }
    }
  });
});

しかし、適切なコンテンツで適切な座標でポップアップを開くにはどうすればよいですか?!?