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

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.

Answer 1

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