Adding Tooltips to Leaflet Layer Control Checkboxes for Disabled Layers

Question

I'm working on an Angular application where I'm using Leaflet and esri-leaflet to display maps and layers. I have a layer control with checkboxes (the build-in one of leaflet) that allow users to toggle the visibility of different esri layers on the map. I've implemented a minZoom condition for some layers to disable the checkboxes when the zoom level is too low.

Now, I would like to display tooltips when users hover over the checkboxes that are disabled due to the minZoom condition. The tooltips should provide an explanation of why the checkboxes are disabled. I've researched how to achieve this and it doesn't seems the leaflet has a built-in event listener for hovering over the layer control, but only for overlay selcetion/deselection. I'm not sure how to proceed.

Here's a simplified version of my code:

import * as L from 'leaflet';
import * as esri from 'esri-leaflet';
import * as vector from 'esri-leaflet-vector';


function esriLayersExtension(options): any {
  let overlays = {};

  if (options.overlays) {
    for (let layer of options.overlays) {
      try {
        let overlay;
        if (layer.type === 'featureLayer') {
          const cloneStyle = { ...layer.style };
          overlay = esri.featureLayer({
            url: layer.url,
            simplifyFactor: layer.simplifyFactor,
            precision: layer.precision,
            minZoom: layer.minZoom,
            maxZoom: layer.maxZoom,
            style: function() {
              return cloneStyle;
            }
          });
        } else if (layer.type === 'vectorTileLayer') {
          overlay = vector.vectorTileLayer(layer.url, options);
        }
        overlays[layer.name] = overlay;
      } catch (err) {
        this.snackbarService.openButtonSnackBarFailed(BottomMessageComponent, err?.error?.exceptionMessage);
      }
    }
  }

  return overlays;
}

Entry point for the esri layer extension:

  extendEsri(): void {
    (L.Control as any).CbEsri = L.Control.extend({
      options: {
        maps: [],
        overlays: []
      },
      onAdd: function(map) {
        if (this.options) {
          let overlays = esriLayersExtension(this.options);
          let baseLayers = esriMapsExtension(this.options, map);

          if (baseLayers || overlays) {
            L.control.layers(baseLayers, overlays, { position: 'topleft' }).addTo(map);
            let container = L.DomUtil.create('div', 'cb-esri');
            return container;
          }
        }
      },
      onRemove: function() {}
    });
    (L.control as any).cbEsri = function(options) {
      return new (L.Control as any).CbEsri(options);
    };
  }

I would greatly appreciate guidance on how to implement tooltips that explain the reason for the disabled checkboxes due to the minZoom condition. Should I modify my existing code or take a different approach? Any examples, suggestions, or resources to help me achieve this functionality would be very helpful.

Thank you in advance for your assistance!