Tooltip

This plugin adds a tooltip when hovering over a subDomain’s cell

Install

NPM

The plugin is built-in in CalHeatmap, just import the module with

import { Tooltip } from 'cal-heatmap';

CDN

Add the tooltip plugin script and its dependencies in your page’s <head>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/cal-heatmap@4.0.0-beta.4/dist/plugins/Tooltip.min.js"></script>

Usage

const cal = new CalHeatmap();
cal.paint({}, [[Tooltip, TOOLTIP_OPTIONS]]);

TooltipOptions

// PopperOptions, see https://popper.js.org/docs/v2/constructors/#options
interface TooltipOptions extends PluginOptions, PopperOptions {
  enabled: boolean;
  text: (timestamp: number, value: number, dayjsDate: dayjs.Dayjs) => string;
}

enabled

Whether to enable the tooltip

Default: true

const cal = new CalHeatmap();
cal.paint({}, [ [ Tooltip ] ]); // Enable the tooltip with the default options

To customize the tooltip’s UI, look for #ch-tooltip in the CSS.

text

A function returning the content of the tooltip

text: (timestamp: number, value: number, dayjsDate: dayjs.Dayjs) => string;

Default:

function (timestamp, value, dayjsDate) {
  return `${value} - ${dayjsDate.toString()}`;
}

Arguments:

timestamp: The timestamp of the current subDomain, in ms, rounded to the start of the subDomain
value: The value of the current subDomain, from your data set
dayjsDate: A locale/timezone aware dayjs object, provided for easier date manipulation and formatting.

Additional Popper options

You can customize the underlying popper instance further, by passing the same object as createPopper’s Options argument.

const cal = new CalHeatmap();
cal.paint(
  {},
  [
    [
      Tooltip,
      {
        placement: 'right',
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: [0, 40],
            },
          },
        ],
      }
    ]
  ]
);