0

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()

Community
  • 1
  • 1
Zameer Ansari
  • 28,977
  • 24
  • 140
  • 219
  • 1
    Why not just calculate the text inside the d3.tip `html` function? There's no particular reason that code has to be in `title`. Then there's [`.renderTitle(false)`](https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.baseMixin+renderTitle) to remove the title elements. – Gordon Oct 05 '16 at 22:13
  • @Gordon Okey, however where shall I store the extra data? I don't need only the `key` and `value`, hence used the `reduce` – Zameer Ansari Oct 06 '16 at 06:59
  • ? I don't see any extra data being stored here. You should be able to move the code without any problems. `denialGroup` is independent and can be used from `d3-tip` just as well as `.title`. – Gordon Oct 06 '16 at 15:23

1 Answers1

0

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 => '')
ragan
  • 203
  • 2
  • 11