'Style a Mapbox Popup's Pointer/Indicator

I am styling some popups for a map displayed through Mapbox using Mapbox's GL JS. However, I cannot find in their documentation regarding the classes that are automatically assigned to the popups. Thus far, my CSS looks like this:

.mapboxgl-Popup-content {
    color: #F3F3DD;
    background-color: #91785D;
    border-color: #91785D;
    max-width: 250px;
    box-shadow: 3px 3px 2px #8B5D33;
    font-family: 'Oswald';
}

This yields these pretty little boxes:

map tooltip

My issue is the white triangle at the very bottom that points to the marker. I want to change its color.

I have tried a number of CSS classes to fix this. Including, but not limited to, .mapboxgl-popup, .mapboxgl-popup-anchor, .mapboxgl-popup-pointer, etc. I am not sure where to acquire the documentation I need to know what CSS class I should be using to change the color of this pesky triangle.

csspopupstylesmapboxmapbox-gl-js


Solution 1:[1]

Here's what you need. It's not just one class because the tip can change position:

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: #fff;
    }
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: #fff;
    }
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: #fff;
    }
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: #fff;
    }

Solution 2:[2]

The CSS class that you need to update is ".mapboxgl-popup-tip". If there is no any class like that in your CSS file, just create it and give the color what you want to "border-top-color: " attribute.

Solution 3:[3]

.mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip { border-top-color: #f15b28; }

i finally got it how this works. <Popup archor={'bottom'}, use .mapboxgl-popup-anchor-bottom plus .mapboxgl-popup-tip changing border color (top, bottom, left, right).

Solution 4:[4]

I figured out why applying CSS doesn't affect the element (in this case, the tip).

I did some debugging in Chrome with Inspect Element.

It turns out my CSS was indeed being applied; however, it was being overridden from the MapBox stylesheet I applied in my index.html.

enter image description here

At first, I thought that maybe if I reordered my stylesheets I could have my stylesheet be invoked after the MapBox stylesheet, then I'd be fine.

This was not true.

Inspect element still showed my CSS was being overridden.

The solution was to add !important:

    border-top-color: black !important;

This would override any previous styling done by MapBox.

For more info see:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 iH8
Solution 2 george
Solution 3 Gabriel Cecon Carlsen
Solution 4 ejgza

Related Questions