Custom Tooltip Styles - MapBox

by forssux

HTML

<script src="https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css">
<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>
</body>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }


/*
 * 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:black;
  color:#fff;
  font-size:16px;
  line-height:24px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
  color:white;
  }
.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;
  }


.leaflet-popup-content {
  padding: 0px 0px 0px;
  margin: 0;
}

.leaflet-popup.leaflet-zoom-animated {
  width: 260px;
  left: -130px;
}

.generalt {
  background-image: url("http://boogybuggy.com/wp-content/uploads/2014/12/GeneralTsoChicken_5.jpg");
  width: 100%;
  height: 90px;
  background-size: 140%;
  background-repeat: no-repeat;
  background-position: 15% 50%;
  padding: 20px 10px 0px 10px;
  color: white;
  text-shadow: 0px 0px 5px black;
}
    
.detail {
  background-color: #FCF4E1;
  color: #432B20;
  text-align: center;
}

JavaScript

L.mapbox.accessToken = 'pk.eyJ1IjoiYWFjcmVlIiwiYSI6Imk0eUNsVjgifQ.TiBGgwCosEggyCgGJDlryQ';
var map = L.mapbox.map('map', 'aacree.mo197mh8');