Mapbox-gl-js: Consider "className" option to Popup

[stevage]

Currently all popups created using Popup are created with this structure:

<div class="mapboxgl-popup mapboxgl-popup-anchor-bottom" style="....">
<div class="mapboxgl-popup-tip"></div>
<div class="mapboxgl-popup-content">
...user content goes here...
</div>
</div>

Which is fine for styling if you only have one "type" of popup. But sometimes you have hover-over popups, and click popups, which you want to style differently: less padding in the former case.

It's currently very difficult to achieve this, because the outer two layers of <div> are identical in both cases.

Suggestion:

        var popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false,
            className: "hover-over"
        });

which would lead to:

<div class="mapboxgl-popup mapboxgl-popup-anchor-bottom hover-over" style="....">
...

[jfirebaugh]

In the past we've suggested applying classes to your user content and styling based on that. Is there a case where that doesn't suffice?

[stevage]

Yes, as described above:

But sometimes you have hover-over popups, and click popups, which you want to style differently: less padding in the former case.

To spell it out more: currently you can only style the content of the popup individually. Which means every popup will share the same (by default, white, padded, dark outlined) frame.

If you want to have hover-over popups without the padding and frame (which I do), but also have click popups with the padding and frame, you can't do that just by changing the styling of mapboxgl-popup-content.

[Ashot-KR]

I add this option in PR #6502