3

How do you create tooltips (context) on OpenLayers 3 map, using standard Javascript and flat CSS. (No extra libraries)

5

This works on OL 3.20.1. This example assumes you already have a feature layer added to your map.

HTML

<div id="map" class="map"><div id="info"></div></div> 

CSS

#map {
    position: relative;
}
#info {
    position: absolute;
    z-index: 10;
    background-color: black;
    border: 1px solid #ccc;
    color: #fff;
    padding: 5px;
    font-size: 18px;
    top: -10em;
    pointer-events: none;
}

JS

Here you need to replace feature.get('name') by whatever feature property you want to show on your popup.

var info = document.getElementById('info');
var target = document.getElementById('map');
function displayFeatureInfo(pixel) {
        info.style.left = pixel[0] + 'px';
        info.style.top = (pixel[1] - 50) + 'px';
        var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
            return feature;
        });
        if (feature) {
            var text = feature.get('name');
            info.style.display = 'none';
            info.innerHTML = text;
            info.style.display = 'block';
            target.style.cursor = "pointer";
        } else {
            info.style.display = 'none';
            target.style.cursor = "";
        }
    }


map.on('pointermove', function(evt) {
        if (evt.dragging) {
            info.style.display = 'none';
            return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(pixel);
});
  • I'm trying to use this, but with no luck. I suspect that my problem is that my features are all points with an icon style set - so it looks to the user like they are mousing over the icon, but the event doesn't fire because the point feature is infinitesimally small. Is there a way to get the expected behaviour? – Tom Feb 28 '18 at 13:50
  • I'd suggest setting two styles to your feature layer. One similar to the one you currently have, one transparent, slightly larger, that matches the area where you expect the popup to fire up. – Alexis_A Feb 28 '18 at 16:08
  • Actually it seems I had two problems. One was that map.getEventPixel(event) seems to give different results to event.pixel and the latter gives the right result. The second was that map.forEachFeatureAtPixel will only consider features whose geometry is within a certain distance of the mouse event, even if the icon is much larger than the geometry. Setting renderBuffer on the vector layer to something larger than the dimensions of the icon fixes this. – Tom Feb 28 '18 at 16:27
0

I was following the official example of the measure tool and used the way they implemented the tooltip. With that example it was relatively straight forward for me as beginner to implement a tooltip. Below the link:

https://openlayers.org/en/latest/examples/measure.html

It is using OL 4.5.0 but worked for me in 3.16.0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.