Viewing an older version of mapbox.js. Check out v1.4.0 for the latest.

Marker Tooltips Outside of the Map

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker Tooltips Outside of the Map</title>
  <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; right:300px; left:0; }
  #alert {
      position:absolute; top: 0; right: 0;
      bottom: 0; width: 260px; background:#e8e8e8;
      padding:20px;
  }
  h1 { margin-top:0; }
</style>

<div id='map'></div>
<div id='alert'></div>

<script>
  var map = mapbox.map('map');
  map.addLayer(mapbox.layer().id('examples.map-20v6611k'));

  // Create an empty markers layer
  var markerLayer = mapbox.markers.layer();

  // Add interaction to this marker layer. This
  // binds tooltips to each marker that has title
  // and description defined.
  map.addLayer(markerLayer);

  var alert = document.getElementById('alert');

  markerLayer.factory(function(f) {
      var elem = mapbox.markers.simplestyle_factory(f);
      MM.addEvent(elem, 'click', function(e) {
          // clear the alert box
          alert.innerHTML = '';
          // add a header and paragraph, and fill them with content
          // from the feature, which we've stored as the variable 'f'
          var h1 = alert.appendChild(document.createElement('h1'));
          var p = alert.appendChild(document.createElement('p'));
          // pull the title and description attributes of the feature.
          // you could customize this to pull other attributes
          h1.innerHTML = f.properties.title;
          p.innerHTML = f.properties.description;
          // prevent this event from bubbling down to the map and clearing
          // the content
          e.stopPropagation();
      });
      return elem;
  });

  // clear the content of alert when the user clicks on a map area other
  // than a tooltip
  MM.addEvent(map.parent, 'click', function() {
      alert.innerHTML = '';
  });

  map.zoom(5).center({ lat: 37, lon: -77 });

  // See the 'adding a single marker example for help with adding a marker
  markerLayer.add_feature({
      geometry: {
          coordinates: [-77, 37.9]
      },
      properties: {
          'marker-color': '#000',
          'marker-symbol': 'star-stroked',
          title: 'Example Marker',
          description: 'This is a single marker.'
      }
  });

  // Attribute map
  map.ui.attribution.add()
      .content('<a href="http://mapbox.com/about/maps">Terms &amp; Feedback</a>');
</script>
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.