CODEWITHSUNDEEP
leaflettooltip
Mawg
Mawg

Reputation: 40175

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

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.

Upvotes: 0

Views: 968

Answers (1)

Falke Design
Falke Design

Reputation: 11348

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

Upvotes: 1

Related Questions