Add a parameter to Popup that allows users to add CSS classes

[infacq]

how do I append a class along with class mapboxgl-popup. Thanks

[lucaswoj]

This functionality is not currently supported in GL JS. I have repurposed this ticket to track that functionality. I encourage you to submit a PR adding it! Here is the relevant line: http://github.com/mapbox/mapbox-gl-js/blob/66a567cfb7b566f672f7e77399c6607ad86701ce/js/ui/popup.js#L174-L175

[jfirebaugh]

Instead of adding a class to the mapboxgl-popup div, supply your own HTML content (using setHTML or setDOMContent that contains a div with the desired class.

[andrewharvey]

Instead of adding a class to the mapboxgl-popup div, supply your own HTML content (using setHTML or setDOMContent that contains a div with the desired class.

I down voted this because it is a child of the popup container which includes the popup tip, hence with this approach it seems you can't control the style of the popup tip.

Adding CSS classes to the root popup container would address that.

[cyprianos]

Here my "brute-force" solution for changing background of popup belonging to marker.

Double use of parentNode to access main element, append className and create appropriate styles for tip. In the same manner u can play with border length to change tip length or override any styles u need without replacing default Mapbox styles.

var popup = new mapboxgl.Popup();
var content = document.createElement('div');

content.innerHTML = '<p>some html</p>';
popup.setLngLat([-118.705, 34.142])
                .addTo(map)
                .setDOMContent(content);

content.parentNode.parentNode.className += ' mapboxgl-popup--blue';'

Then you can write CSS:

.mapboxgl-popup.mapboxgl-popup--blue {
/*any styles u wish*/
}

.mapboxgl-popup--blue .mapboxgl-popup-content{
    background-color: rgb(66,111,175);
    padding:20px;
    color: white;
    max-width:none;
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{
    border-top-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{
    border-bottom-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{
    border-right-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{
    border-left-color: rgb(66,111,175);
}

.mapboxgl-popup--blue.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
    border-bottom-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{
    border-bottom-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{
    border-top-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{
    border-top-color: rgb(66,111,175);
}

[damienalexandre]

For peoples (like me) seeing this via their favorite search engines, looks like the feature is going to be release! See #6299 + #6502 🎉