Marker tooltips outside the map

Legacy

Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.

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>

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.

Copy example