Tooltips

Kartograph tooltips are based on the wonderful qTip plugin for jQuery, so you need to include at least the qTip JS and CSS files.

<script src="js/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.min.css">

Then you have two ways to add your custom tooltips to a map layer, by either passing the content via callback function or dictionary.

Using a content callback

You can specify a callback function that returns the tooltip content for each path, too. The function will get the path data as argument.

map.addLayer({ id: 'countries' });

map.tooltips({
   layer: 'countries',
   content: function(data) {
      // data = { iso3: 'DEU', name: 'Germany' }
      return 'some tooltip content'; // or ['tooltip title', 'tooltip body']
   }
});

However, if you assign the key for the layer, the path id will be passed as second argument to the content callback for convenience.

map.addLayer({ id: 'countries', key: 'iso3' });

map.tooltips({
   layer: 'countries',
   content: function(data, id) {
      // data = { iso3: 'DEU', name: 'Germany' }
      // id = 'DEU'
      return 'some tooltip content'; // or ['tooltip title', 'tooltip body']
   }
});

Using a content dictionary

Note that it is required to specify a key property for the layer that you want to add tooltips to.

map.addLayer({ id: 'countries', key: 'iso3' });

tt = {
   DEU: 'Here is a <em>tooltip</em> for Germany (no title)',
   FRA: ['Title for France', 'Here is a <em>tooltip body</em> for France']
};

map.tooltips({
   layer: 'countries',
   content: tt
});