bringToFront() not working on tooltips in Leaflet

Question

I have a Leaflet map that includes polygons and data from a GeoJSON file. I have permanent tooltips for each polygon that include data for the user to see. But there are so many tooltips that sometimes they overlap, and then the reader can't read the overlapped tooltips.

A solution to this problem, I thought, would be that if the user clicked a tooltip, it would be brought to the front. Unfortunately, I haven't been able to make this idea work. Does anyone know how to make this happen please?

Here is my code:

//define the map
var map = L.map('map').setView([40.350641, -79.86773], 15); 

var OpenStreetMap_France = L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
    maxZoom: 22,
    ext: 'png',
    attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

//grab data about real estate parcels from json file and put in tooltips
var parcels = new L.GeoJSON.AJAX("data/parcels.geojson",{ //add parcel shapes and data
    onEachFeature: function (feature, layer) {
        layer.bindTooltip(/*feature.properties.PIN + " " + */"<h4>" + feature.properties.PROPERTYHOUSENUM__asmt + " " + feature.properties.PROPERTYADDRESS__asmt + "</h4>" + "<h5>Use in 1922</h5>" + feature.properties.USE_1922 + "<br/>" + "<h5>Current Use</h5>" + feature.properties.CURRENT_USE, { 'permanent': true, 'interaction': true });

        //when you click a tooltip, bring it to the front
        layer.on('click',function() {
           this.bringToFront(); //doesn't work              
           this.setZIndexOffset(999); //doesn't work
        });

    }
}).addTo(map);

Answer 1

As @IvanSanchez wrote in his comment to the same question posted on StackOverflow site, you are bringing feature layer to the front, not tooltip. Tooltips are on separate map pane from feature overlays and as such not affected by that.

Since there is no native Leaflet method to bring tooltip to the front and since there is also no Leaflet method to get tooltip container, a hack is needed to achieve what you want.

Inside click event function you first retrieve layer tooltip with getTooltip() method and then set z-index of tooltip container, which you get through internal _container property. Initial z-index values has to be set high enough and at each usage increased by one, so that the next clicked tooltip will be on top of the previous one.

Your code could then look something like this:

var tooltipZIndex = 5000;

var parcels = new L.GeoJSON.AJAX("data/parcels.geojson",{ //add parcel shapes and data
  onEachFeature: function (feature, layer) {
    layer.bindTooltip(/*feature.properties.PIN + " " + */"<h4>" + feature.properties.PROPERTYHOUSENUM__asmt + " " + feature.properties.PROPERTYADDRESS__asmt + "</h4>" + "<h5>Use in 1922</h5>" + feature.properties.USE_1922 + "<br/>" + "<h5>Current Use</h5>" + feature.properties.CURRENT_USE, { 'permanent': true, 'interaction': true });
    layer.on('click',function() {
      var tooltip = this.getTooltip();
      var container = tooltip._container;
      container.style.zIndex = tooltipZIndex++;
    });
  }
}).addTo(map);