-2

I am using the ol.geom.Polygon object to draw a polygon and I have added a tooltip to this to show the acres drawn like this.

     if (geom instanceof ol.geom.Polygon) {
                                    MapValues.polyAcres = MapService.formatArea(geom);
                                    tooltipCoord = geom.getInteriorPoint().getCoordinates();                                         
                                    MapValues.measureTooltipElement.innerHTML = MapValues.polyAcres;
                                    MapValues.measureTooltip.setPosition(tooltipCoord);

UPDATE

This is how I'm creating the tool-tip...

mapSVC.createMeasureTooltip = function(){
            if (MapValues.measureTooltipElement) {
                MapValues.measureTooltipElement.parentNode.removeChild(MapValues.measureTooltipElement);
            }
            MapValues.measureTooltipElement = document.createElement('div');
            MapValues.measureTooltipElement.className = 'tooltip tooltip-measure';
            MapValues.measureTooltipElement.style = 'pointer-events: none';
            MapValues.measureTooltip = new ol.Overlay({
                element: MapValues.measureTooltipElement,
                offset: [0, -15],
                positioning: 'bottom-center'
            });
            MapValues.mapObj.addOverlay(MapValues.measureTooltip);

        }

The problem is, depending on the shape drawn a point and the tool-tip can overlap which effectively blocks my ability to set a point.

How can I add the style 'pointer-events: none' to the ol.Overlay?

Funn_Bobby
  • 647
  • 1
  • 20
  • 57
  • add this css to your tool-tip div `pointer-events: none; ` though the information you provide is not enough to guide you properly – pavlos May 11 '18 at 08:45
  • Okay...It looks like this would work but I would also need to add the style to the containing ol.Overlay...which I can't see a way to do? – Funn_Bobby May 11 '18 at 13:55
  • Comments on down votes are appreciated, it helps not only me but everyone understand how to make their questions better. – Funn_Bobby May 11 '18 at 20:43
  • 2
    try to add the same piece of code within `ol.css` file on `ol-overlaycontainer` class. If you provide a fiddle with your case we may help you more properly, . – pavlos May 11 '18 at 21:16

1 Answers1

0

Add stopEvent: false when creating the overlay like this

MapValues.measureTooltip = new ol.Overlay({
    element: MapValues.measureTooltipElement,
    offset: [0, -15],
    positioning: 'bottom-center',
    stopEvent: false
});
pavankguduru
  • 315
  • 1
  • 13