index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A MapBox Map</title>

    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
    <script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />

    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id='map' class='dark'></div>
<script>
  // Visit https://www.mapbox.com/mapbox.js/overview/ for documentation and examples
  var map = L.mapbox.map('map', 'energy.ggnnl2il', {
      detectRetina: true,
      zoomControl: false,
      // gridControl: false, //turns off automatic tooltips ??
      scrollWheelZoom:false
  }).setView([38.39, -98.40], 4);


    map.addControl( L.control.zoom({position: 'topright'}) );

    map.gridControl.options.follow = true;


    map.gridLayer
    .on("mousemove", function (e) {
        class_current = (e.data && e.data.CLASS) || null;
        console.log(class_current);

        //How do I bind this class_current to a movetip/tooltip/popup? Then I would style it from there, based on class.

    }).on("mouseout", function (e) {
        class_current = null;
    });


</script>
</body>
</html>