Hover over Element in Custom Leaflet Legend

Question

I created a Leaflet Map with a Legend. The goal would be to hover over the text element in the legend area and show a tooltip with a image.

Problem: hover is not showing up! I tried very different version. The easiest way which should usually work is this one:

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map).bindPopup('Popup.');
var MyControl = L.Control.extend({
options: {
    position: 'topleft'
},

onAdd: function (map) {
    // create the control container with a particular class name
    var container = L.DomUtil.create('div', 'my-custom-control');
    container.innerHTML += '<div id="hoverhelp" title="">Image Hover Example Leaflet</div>';

    L.DomEvent.disableClickPropagation(container);
    return container;
}});
map.addControl(new MyControl());

$( "#hoverhelp" ).tooltip({ content: '<img src="https://www.google.com/logos/doodles/2020/mascha-kalekos-113th-birthday-6753651837108682-s.png" />' });

If someone wants to try: jsfiddle

Answer 1

You have to use JQuery UI to get access to tooltip. https://jqueryui.com/

Here is your code after editing in jsfiddle. http://jsfiddle.net/2qrbzstu/

// Demo code from leafletjs.com
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map).bindPopup('Popup.');

var MyControl = L.Control.extend({
  options: {
    position: 'topleft'
  },

  onAdd: function(map) {
    // create the control container with a particular class name
    var container = L.DomUtil.create('div', 'my-custom-control');
    $(container).html('<div id="hoverhelp" title="so how">Image Hover Example Leaflet</div>');

    L.DomEvent.disableClickPropagation(container);
    return container;
  }
});

map.addControl(new MyControl());

$("#hoverhelp").tooltip({ content: '<img src="https://www.google.com/logos/doodles/2020/mascha-kalekos-113th-birthday-6753651837108682-s.png" />' })

#map {
    position: fixed;
    left:0;
    top: 0;
    right: 0;
    bottom: 0;
}
.my-custom-control {
    background-color: white;
    padding: 10px;
}

<div id="map" title="map"></div>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>