tooltip issue

I am trying to get the tooltip to work but nothing is showing up.

I used the code you have in the demo with the following scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
    <script>
      $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>

Inside the CalendarHeatmap component, I added these props

          titleForValue={customTitleForValue}
          tooltipDataAttrs={customTooltipDataAttrs}

with the functions from your demo

const customTooltipDataAttrs = { 'data-toggle': 'tooltip' };
function customTitleForValue(value) {
  return value ? `You're hovering over ${value.date} with value ${value.count}` : null;
}

I do not see any error too, so I am not sure what the problem is… The calendar is working itself showing the colored squares and when I click on it, it shows the count so that is fine.

[atkawa7]

I had the same problem. Ended up using https://github.com/wwayne/react-tooltip. Something like this

const customTooltipDataAttrs = (value) => ({'data-tip': this.valueToString(value)});

Note: I called <CalendarHeatmap> before <ReactTooltip/>

[isaacnass]

as an addendum to @atkawa7 if you’re pulling records asynchronously to put in the heatmap make sure to either render the heatmap with the tooltip conditionally or call ReactTooltip.rebuild() after you fetch the data to rebind the tooltips!