How to use HTML in a tooltip on a Leaflet legend (or other control)?

Question

I have lost a day on this so far. I have a legend that will obscure a large part of my (AngualrJs) leaflet map, so I don't want it to be permanently visible.

I guess that means a tooltip, although a clickable button might also be acceptable (downside: requires a click to open & one to close).

There are many, many, many attempts to answer this out there, and even a Leaflet legend plugin, which would be ideal, but won't work for me, probably because of the versions of angualrJs or Leaflet used.

Most of the solutions I found seem to use HML & CSS to position a button over the map, but I would be happier with something that is a part of the map.

This question has an answer that actually works. BUT, if I put even the simplest HTML in it, it gets rendered as plain text. E.g <h``>Legend</h1>.

What is the simplest way to show a tooltip on a Leaflet control with interpreted HTML? Failing that a pop-up window?

The legend cannto be permanently displayed as it would obscure the map, and the map must fill the window.

Falke Design · Accepted Answer · 2021-01-18T14:05:59.940

title can't be styled because every browser display it different and has no style functions. Also it should only a one liner.

You can create your own Tooltip which is only visible if the mouse is over the control.

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 () {
        this.hiddenContainer.style.display ="block";
      },
      _mouseout : function () {
        this.hiddenContainer.style.display ="none";
      },
      setContent: function(text){
        this.hiddenContainer.innerHTML = text;
      }
    });
    var control = new L.CustomControl().addTo(map)
    control.setContent('<span style="color: red">TEST</span>')

https://jsfiddle.net/falkedesign/r1ndpL9y/

You need to style it with CSS by your self

You, sir, are both a genius and a life-saver. I shall award a bounty just as soon as the system lets me. Don't eb afraid to remind me in 3 or 4 days if I have forgotten. — Mawg says reinstate Monica, Jan 18 '21 at 14:29
Nice to hear that it is working for you ;) I will remind you, thank you — Falke Design, Jan 18 '21 at 14:30
Ooops, only the first line of the tooltip shows with a white background. The rest of my tooltip shows, but it has atransparent background & gets confused with the map :-( — Mawg says reinstate Monica, Jan 18 '21 at 14:51
change `hiddenContainer.style.height = "100%";` to a fix height like `300px` — Falke Design, Jan 18 '21 at 14:53
I thoguh about that, but what about differnt screen sizes? E.g desktop, laptop, tablet, phone. Or, if the user resizes the browser? — Mawg says reinstate Monica, Jan 18 '21 at 14:55
Aha!! the correct way is to set `hiddenContainer.style.height = "400%"` to make it 4 lines, etc. Thanks ! — Mawg says reinstate Monica, Jan 18 '21 at 14:56

How to use HTML in a tooltip on a Leaflet legend (or other control)?

1 Answers1