I am having a hard time implementing a UI tooltip in a CartoDB.js viz. Could someone demonstrate how to implement using this fiddle on the variable {{NAME}}?


it's pretty easy:

 cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json').addTo(map)
   .done(function(layer) {

      var sublayer = layer.getSubLayer(0);
      sublayer.set({ 'interactivity': ['cartodb_id', 'name'] });

      var i = new cdb.geo.ui.InfoBox({
          layer: layer,
          template: '<h3>{{name}}</h3><p>more info</p>',
          width: 200,
          position: 'bottom|right'


I'd recomend you to take a look to The Hobbit example: https://github.com/CartoDB/cartodb.js/blob/develop/examples/TheHobbitLocations/js/app.js

  • Javi is it cartodb.createViz() or can you also do this with cartodb.createLayer() ? I get an error 'vis is not defined' with createLayer()
    – clhenrick
    Nov 23 '14 at 20:28
  • @chrishenrick sorry, I pasted the wrong code, I fixed it in the response Dec 1 '14 at 14:37
  • no worries I figured that was the case and thanks very much!
    – clhenrick
    Dec 1 '14 at 18:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.