Skip to main content

Tooltip

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

Install​

Add the tooltip plugin and its dependendcy in your page's <head>, after cal-heatmap library <script>

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

Usage​

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

See TooltipOptions for the full list of available 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

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.

And more...​

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

Styling​

See #ch-tooltip properties in the CSS