how can I hide tail triangle on popup

Question

image http://pasteio.com/m26f642c81452a5bf67cfc5f0b0f2390c

I'm using leaflet to render the mapbox map. There is small triangle on the top of marker; how can I hide it?

Answer 1

For others coming across this post who may be struggling with the tooltip triangle, or even the background css of the tooltip, I have put together my research in one place and found the various ways to affect the triangle and the background of the tooltips and the popups!

If you have a POPUP bound to a marker, .leaflet-popup-tip controls the triangle. Here I am hiding it:

.leaflet-popup-tip {
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important;
}

If you have a TOOLTIP you have added to the map, you can control the tooltip's triangle with this magical css:

.leaflet-tooltip-top:before, 
.leaflet-tooltip-bottom:before, 
.leaflet-tooltip-left:before, 
.leaflet-tooltip-right:before {
    border: none !important;
}

More styling: POPUP: You can also control the popup's css as well by targeting .leaflet-popup-content-wrapper. Here I am completely removing all traces of the background/border/box of the popup & enlarging the font:

.leaflet-popup-content-wrapper {
    background: rgba(0, 0, 0, 0) !important;
    border: none !important;
    font-size: 20px;
    box-shadow: none !important;
}

TOOLTIP: You can add a class name to a tooltip when you create it such as {className: 'popup'}, and then use that to style the tooltip:

.popup {
    background: rgba(0, 0, 0, 0) !important;
    border: none !important;
    font-size: 20px;
    box-shadow: none !important;
}

To see how to add tooltips and popups to the map, and how all of this works together, here is a working example with commenting throughout: https://repl.it/@MeowMeow/NeighboringConventionalPhp

Hope this is helpful to someone! :)

Answer 2

This triangle is controlled by the .leaflet-popup-tip class in css. If you are using standard Leaflet, you should be able to hide the tip by adding the following to your css (after leaflet.css is loaded):

.leaflet-popup-tip {
    width: 0px;
    height: 0px;
  }

Mapbox actually creates the tip in a slightly different way from standard Leaflet, by styling the element border rather than the element content, so if you are using mapbox.js, you should be able to do it by adding the following (after mapbox.css is loaded):

.leaflet-popup-tip {
    border: 0px;
  }