ThinkGeo.com    |     Documentation    |     Premium Support

Problem with popup/tooltip placement

#1

 I am using the following code to add a client-side tooltip to an OpenLayers Vector layer:



var hoverControl = new OpenLayers.Control.SelectFeature(layer,
{
    hover: true,
    highlightOnly: true,
    overFeature: function (feature) {
        var tooltip = new OpenLayers.Popup.Anchored("vesselTooltip",
                    feature.geometry.getBounds().getCenterLonLat(),
                    new OpenLayers.Size(150, 15),
                    "

some text

",
                    null, false, null);


        tooltip.backgroundColor = '#454549';
        tooltip.autoSize = true;
        tooltip.relativePosition = 'tl';

        feature.popup = tooltip;
        map.addPopup(tooltip);
    }
});


 


The problem is that the placement of the popup is not consistent relative to the marker/mouse cursor. Sometimes the popup shows up on top of the marker/cursor, which makes it hard or impossible to click the marker. I have already tried to offset the popup placement using the following CSS:




.olPopup { margin-top: -20px; margin-left: 20px; }


This works, but the placement still depends on where on the map the marker is located.


Please see attached screenshots. You will see how the popup is placed relative to the cursor for two different markers.




Thank you,


Sindre




#2

Hi Sindre, 
  
 I created a sample and it’s very easy to recreate this issue near the map edge. We’ll fix it and let you know. However, I found another popup “FramedCloud” works good, So it might be a workaround for you to replace Anchored with FramedCloud and then adjust the FramedCloud for you. 
  
 Hope it helps, 
 Edgar