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