Custom Control with Tooltip

by falkedesign

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
<div id="map" class="map"></div>

CSS

.map{
  width: 500px;
  height: 500px;
}

JavaScript

var map = L.map(
    'map', {
    center: [46, 12],
    minZoom: 2,
    zoom: 5,
    scrollWheelZoom: false}
);

// add the OpenStreetMap tiles
tile = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map)



L.CustomControl = L.Control.extend({
      options: {
        position: 'topright'
        //control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
      },

      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
        container.title = "Plain Text Title";
        var button = L.DomUtil.create('a', '', container);
        button.innerHTML = '<img src="https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/location-512.png" width="100%"/>';
        L.DomEvent.disableClickPropagation(button);
        L.DomEvent.on(button, 'click', this._click,this);
        L.DomEvent.on(button, 'mouseover', this._mouseover,this);
        L.DomEvent.on(button, 'mouseout', this._mouseout,this);



        var hiddenContainer = L.DomUtil.create('div', 'leaflet-bar leaflet-control',container);
        hiddenContainer.style.position = "absolute";
        hiddenContainer.style.right = "32px";
        hiddenContainer.style.width = "100px";
        hiddenContainer.style.height = "100%";
        hiddenContainer.style.top = "-2px";
        hiddenContainer.style.margin = "0";
        hiddenContainer.style.background = "#fff";
        hiddenContainer.style.display = "none";

        L.DomEvent.on(hiddenContainer, 'mouseover', this._mouseover,this);
        L.DomEvent.on(hiddenContainer, 'mouseout', this._mouseout,this);
        L.DomEvent.disableClickPropagation(hiddenContainer);

        this.hiddenContainer = hiddenContainer;

        return container;
      },
      _click : function () {
      },
      _mouseover : function () {
       ...