how to do different tooltips depending on data with Meteor Blaze and Bootstrap?

Question

I'm using Meteor Blaze and Bootstrap 3 to display an img with a tooltip on mouseover. It works fine with a static tooltip text:

<img class="socialMediaIcon" src={{iconPath}} data-toggle="tooltip"
     data-placement="right" title={{tooltip}} />

but I want to dynamically change the tooltip depending on the value of a Collection document field.

I've created a template helper to generate the desired text:

Template.SocialMedia.helpers({
  getSocialMediaIconTooltip: function(service) {
    console.log(">>>>>> Tooltip service =", service);
    var smsdata = socialMediaSystem.findOne({service: service});
    if (!smsdata.active)
      return smsData.tooltip;
    else {
      var smudata = socialMediaUser.findOne({accountId: Meteor.user()._id, service: service});
      if (smudata)
        return "Disconnect " + smsData.tooltip;
      else
        return "Connect " + smsData.tooltip;
    }
  },

and I'm calling it with:

<img class="socialMediaIcon" src={{iconPath}} data-toggle="tooltip"
     data-placement="right" title={{getSocialMediaIconTooltip name}} />

where "name" is a field in the open document (the code is inside a {{#each}} loop). "name" is non-blank and is used successfully later in the #each block. "getSocialMediaIconTooltip" never gets called and no tooltip appears. I've used this argument passing syntax in other places that work. What am I doing wrong?

Answer 1

The helper might be throwing an error, and in Blaze templates this means blank output (i.e. no tooltip). Check the browser console for error messages.

Your helper refers to both smsdata and smsData. Is that correct, or is smsData an invalid reference?