Disable title tag in dc.js charts

Question

In this chart , built using dc.js we have got both d3.tip as well as, default title tag.

We needed to have multiple data (not only key and value ) in tooltip. For this reason, we're reducing the data:

 var denialGroup = denialReasonDim.group().reduce(
    function(p, v) {
      p.reason = v.reason;
      p.payer = v.payer;
      p.denialAmount += v.denialAmount;
      p.claimCount += v.claimCount;
      ++p.count;
      return p;
    },
    function(p, v) {
      p.reason = v.reason;
      p.payer = v.payer;
      p.denialAmount -= v.denialAmount;
      p.claimCount -= v.claimCount;
      --p.count;
      return p;
    },
    function() {
      return {
        reason: '',
        payer: '',
        denialAmount: 0,
        claimCount: 0,
        count: 0
      }
    }
  );

And giving it to the rendering title tags:

.title(function(d) {
  var data = denialGroup.all().filter(function(t) {
    return t.key == d.data.key || t.value.reason == d.data.key;
  })
  return d.data.key +
    "\nDenial Amount: $" + formatNumber(d.value);

  if (data.length > 0) {
    return "Key: " + d.data.key +
      "\nValue Denial Amount : $" + formatNumber(d.value) +
      "\nClaim Count: " + formatNumber(data[0].value.claimCount) +
      "\nDenial Amount: $" + formatNumber(data[0].value.denialAmount);
  } else {
    return "Key: " + d.data.key +
      "\nValue Denial Amount : $" + formatNumber(d.value);
  }
});

And this data is being used by d3.tip :

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {

      var tooltipText = $(this).find("title").text();
      var tooltipTexts = tooltipText.split('\n');
      var totalTips = tooltipTexts.length;
      var tooltipHtml = '';
      for (var i = 0; i < totalTips; i++) {
        var tipElements = tooltipTexts[i].split(':');
        var tipKey = tipElements[0];
        var tipValue = tipElements[1];
        tooltipHtml += "<div><strong>" + tipKey + "</strong> <span style='color:red'>" + tipValue + "</span></div>";
      }
      return tooltipHtml;
      /*return "<strong>" + d.key + "</strong> <span style='color:red'>" + d.value + "</span>";*/
    })

The problem is that our client doesn't like default browser title along with d3-tip . We're just interested in d3-tip , not default title tag

Notice that it's not HTML's title attribute which can be disabled with e.preventDefault()

Answer 1

A bit late answer but important question from an aesthetic perspective. You can simply return an empty string and modern browsers won't show the default tip from title tags:

.title(d => '')