1

Working on an OL3 map, and am getting stuck on popover style. I haven't added any CSS to change it at all and it is currently being handled by default Bootstrap settings.

Okay so the problem: each word is being displayed on it's own line. How can I change this? Or, a better question, how do I control the style of the popovers?

This is was it looks like now: https://i.stack.imgur.com/dsD69.png

The code handling popups: 

    //popups
    var element = document.getElementById('popup');
    var popup = new ol.Overlay({
      element: element,
      positioning: 'bottom-center',
      stopEvent: false
    });
    map.addOverlay(popup);

    // display popup on hover
    map.on('pointermove', function(evt) {
      var feature = map.forEachFeatureAtPixel(evt.pixel,
          function(feature, layer) {
            return feature;
          });
      if (feature) {
        var geometry = feature.getGeometry();
        var coord = geometry.getCoordinates();
        popup.setPosition(coord);
        $(element).popover({
          'placement': 'top',
          'html': true,
          'content': feature.get('name')
        });
        $(element).popover('show');
      } else {
        $(element).popover('destroy');
      }
    });

Thanks!

lobstrosity
  • 37
  • 1
  • 5

1 Answers1

0

I think you just need to add some css to the #popup element you're using for the popup.

Something like:

#popup {
    min-width: 280px;
}

Take a look at this example http://openlayers.org/en/master/examples/popup.html for styling ideas.

Tedd
  • 264
  • 1
  • 8