Dc.js d3-tip tooltip with multiple data test fiddle

by JaelB

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.css">
<script src=" //cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<a style='float:left;' href='http://jsfiddle.net/xameeramir/5no3898s/' target='_blank'>works on http</a>
<div class="col-md-4" id="denialReasonChart">
  <div class="chartHeader">
    What are my top denial reasons?
    <a class="reset" style="font-size: 9px; margin-left: 25px;" href="javascript:denialReasonChart.filterAll();dc.redrawAll();">Reset</a>
  </div>
  <div id="denialReasonChart_d" class="noDataFound">No Data Found </div>

</div>
<div class="col-md-4" id="payerByReason">
  <div class="chartHeader">
    Payer (Top 5) by Denial Reason
    <a class="reset" style="font-size: 9px; margin-left: 35px;" href="javascript:payerByReason.filterAll();dc.redrawAll();">Reset</a>
  </div>
  <div id="payerByReason_d" class="noDataFound">No Data Found </div>
</div>
<div class="col-md-4" id="providerByReason">
  <div class="chartHeader">
    Provider (Top 5) by Denial Reason
    <a class="reset" style="font-size: 9px; margin-left: 18px;" href="javascript:providerByReason.filterAll();dc.redrawAll();">Reset</a>
  </div>
  <div id="providerByReason_d" class="noDataFound">No Data Found </div>
</div>

CSS

.d3-tip {
  background: grey;
}

JavaScript

loadDenialReasonChart();

function loadDenialReasonChart() {
  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>";*/
    })


  var PracticeId = '-- ALL -- ',
    CityId = '0',
    FromDate = '2016-01-01',
    ToDate = '2016-09-26',
    ProviderId = '0';

  var JsonData = [{
    "reason": "CO",
    "denialAmount": 525690,
    "claimDate": "2016-01-04T00:00:00",
    "payer": "AETNA",
    "provider": 1063538395,
    "claimCount": 13,
    "city": "BRYN MAWR"
  }, {
    "reason": "OA",
    "denialAmount": 410259,
    "claimDate": "2016-01-04T00:00:00",
    "payer": "AETNA",
    "provider": 1063538395,
    "claimCount": 6,
    "city": "BRYN MAWR"
  }, {
    "reason": "CO",
    "denialAmount": 256597,
    "claimDate": "2016-06-22T00:00:00",
    "payer": "HIGHMARK BLUE SHIELD",
    "provider": 1912043258,
    "claimCount": 9,
    "city": "WEST CHESTER"
  }, {
    "reason": "CO",
    "denialAmount": 252686,
    "claimDate": "2016-01-22T00:00:00",
    "payer": "NOVITAS SOLUTIONS, INC.",
    "provider": 1609079151,
    "claimCount": 885,
    "city": "LAFAYETTE"
  }, {
    "reason": "CO",
    "denialAmount": 247373,
    "claimDate": "2016-05-04T00:00:00",
    "payer": "HIGHMARK BLUE SHIELD",
    "provider": 1699768184,
    "claimCount": 15,
    "city": "POTTSTOWN"
  }, {
    "reason": "OA",
    "denialAmount": 246487,
    "claimDate":...