Legacy
Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.
Marker tooltips outside the map
Display tooltip content from a container outside of a map.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker tooltips outside the map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.info {
position:absolute;
top:10px;
right:10px;
}
.info div {
background:#fff;
padding:10px;
border-radius:3px;
}
</style>
<div id='map'></div>
<div id='info' class='info'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
var info = document.getElementById('info');
var map = L.mapbox.map('map')
.setView([37.9, -77], 6)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
var myLayer = L.mapbox.featureLayer().addTo(map);
var geoJson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-77, 37.9]
},
properties: {
title: 'Marker one',
description: '<em>Wow</em>, this tooltip is breaking all the rules.',
'marker-color': '#548cba'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-78, 36.5]
},
properties: {
title: 'Marker two',
description: 'Another marker, including <a href="http://mapbox.com">a link</a>.',
'marker-color': '#548cba'
}
}
]
};
myLayer.setGeoJSON(geoJson);
// Listen for individual marker clicks.
myLayer.on('click',function(e) {
// Force the popup closed.
e.layer.closePopup();
var feature = e.layer.feature;
var content = '<div><strong>' + feature.properties.title + '</strong>' +
'<p>' + feature.properties.description + '</p></div>';
info.innerHTML = content;
});
// Clear the tooltip when map is clicked.
map.on('move', empty);
// Trigger empty contents when the script
// has loaded on the page.
empty();
function empty() {
info.innerHTML = '<div><strong>Click a marker</strong></div>';
}
</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.