Custom tooltip styles with CSS
Using a class on the map object to customize popup and tooltip themes
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Custom tooltip styles with CSS</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
/*
* These CSS rules affect the tooltips within maps with the custom-popup
* class. See the full CSS for all customizable options:
* https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366
*/
.custom-popup .leaflet-popup-content-wrapper {
background:#2c3e50;
color:#fff;
font-size:16px;
line-height:24px;
}
.custom-popup .leaflet-popup-content-wrapper a {
color:rgba(255,255,255,0.5);
}
.custom-popup .leaflet-popup-tip-container {
width:30px;
height:15px;
}
.custom-popup .leaflet-popup-tip {
border-left:15px solid transparent;
border-right:15px solid transparent;
border-top:15px solid #2c3e50;
}
</style>
</head>
<body>
<div class='custom-popup' id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map')
.setView([37.77396, -122.4366], 12)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
var myFeatureLayer = L.mapbox.featureLayer('/mapbox.js/assets/data/sf_locations.geojson')
.addTo(map);
</script>
Get a free Mapbox account to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and
replacing the Map ID
with
one of your own from your projects.
Having trouble with JavaScript? Try out Codecademy
or contact our support team.