jsanz/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Training | custom tooltip | CartoDB.js</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
  <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
  <style>
    html,
    body {
      height: 100%;
      padding: 0;
      margin: 0;
      position: relative;
    }

    #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
  <!-- layer SQL -->
  <script type="text/sql" id="sql">
    SELECT * FROM ne_10m_populated_places_simple
  </script>

  <!-- layer CartoCSS style -->
  <style type="text/cartocss" id="cartocss">
    #ne_10m_populated_places_simple{ marker-fill: red; }
  </style>

  <script type="tooltip/html" id="tooltip_template">
    <div class="cartodb-tooltip-content-wrapper">
      <div class="cartodb-tooltip-content">
        <p>{{name}} ({{pop_max}})</p>
      </div>
    </div>
  </script>
</head>

<body>
  <div id="map"></div>
  <script>
    (function() {
      'use strict';
      $(document).ready(function() {
        var sublayer
        var map = L.map('map', {
          zoomControl: true,
          center: [40.418709, -3.703277],
          zoom: 3
        });
        L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        }).addTo(map);

        cartodb.createLayer(map, {
            user_name: 'jsanzacademy1',
            filter: "mapnik",
            type: 'cartodb',
            sublayers: [{
              sql: $('#sql').html(),
              cartocss: $('#cartocss').html(),
              interactivity: 'cartodb_id, name, pop_max'
            }]
          }, {
            /*options here*/
          })
          .addTo(map)
          .on('done', function(layer) {
            var sublayer = layer.getSubLayer(0);

            // tooltip definition for createLayer()
            var testTooltip = layer.leafletMap.viz.addOverlay({
              type: 'tooltip',
              layer: sublayer,
              template: $('#tooltip_template').html(),
              width: 200,
              position: 'bottom|right',
              fields: [{
                name: 'name',
                population: 'pop2005'
              }]
            });
            $('body').append(testTooltip.render().el);

          })
          .on('error', function(e) {
            console.log('error: ' + e);
          });
      });
    })();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Training \| custom tooltip \| CartoDB.js</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
	<style>
	html,
	body {
	height: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	}

	#map {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	</style>
	<!-- layer SQL -->
	<script type="text/sql" id="sql">
	SELECT * FROM ne_10m_populated_places_simple
	</script>

	<!-- layer CartoCSS style -->
	<style type="text/cartocss" id="cartocss">
	#ne_10m_populated_places_simple{ marker-fill: red; }
	</style>

	<script type="tooltip/html" id="tooltip_template">
	<div class="cartodb-tooltip-content-wrapper">
	<div class="cartodb-tooltip-content">
	<p>{{name}} ({{pop_max}})</p>
	</div>
	</div>
	</script>
	</head>

	<body>
	<div id="map"></div>
	<script>
	(function() {
	'use strict';
	$(document).ready(function() {
	var sublayer
	var map = L.map('map', {
	zoomControl: true,
	center: [40.418709, -3.703277],
	zoom: 3
	});
	L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
	}).addTo(map);

	cartodb.createLayer(map, {
	user_name: 'jsanzacademy1',
	filter: "mapnik",
	type: 'cartodb',
	sublayers: [{
	sql: $('#sql').html(),
	cartocss: $('#cartocss').html(),
	interactivity: 'cartodb_id, name, pop_max'
	}]
	}, {
	/options here/
	})
	.addTo(map)
	.on('done', function(layer) {
	var sublayer = layer.getSubLayer(0);

	// tooltip definition for createLayer()
	var testTooltip = layer.leafletMap.viz.addOverlay({
	type: 'tooltip',
	layer: sublayer,
	template: $('#tooltip_template').html(),
	width: 200,
	position: 'bottom\|right',
	fields: [{
	name: 'name',
	population: 'pop2005'
	}]
	});
	$('body').append(testTooltip.render().el);

	})
	.on('error', function(e) {
	console.log('error: ' + e);
	});
	});
	})();
	</script>
	</body>
	</html>