Style a Mapbox Popup's Pointer/Indicator

Question

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:

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.

Is there a link to this we could look at? Someone who's not especially familiar with Mapbox GL might still be able to help you figure it out if so. — cjl750, Jun 15 '17 at 00:26

score 14 · Accepted Answer · answered Jun 14 '17 at 21:38

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;
    }

This verified solution didn't work for me. See: https://stackoverflow.com/a/71918620/11694313 — ejgza, Apr 19 '22 at 01:13
@ejgza It works, make sure app's css is included after MapBox one so it would take priority, or add !important. — Zmey, Dec 14 '22 at 04:45

score 4 · Answer 2 · answered Jun 14 '17 at 21:23

4

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.

answered Jun 14 '17 at 21:23

george

610
6
16

This only affects the tip when it is at the bottom of the content – remjx Aug 01 '20 at 04:32

score 1 · Answer 3 · answered Apr 19 '22 at 01:11

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.

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:

score 0 · Answer 4 · answered Nov 11 '21 at 20:31

0

.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).

answered Nov 11 '21 at 20:31

Gabriel Cecon Carlsen

311
3
4

Style a Mapbox Popup's Pointer/Indicator

4 Answers4