Class: Tooltip

CIQ. Tooltip

new Tooltip(tooltipParams)

Add-On that creates a hovering "tooltip" as mouse is moved over the chart when the cross-hairs are active.

Tooltip Example

The tool-tip is directly linked to the cross-hairs. So if you disable the cross hairs, the tool-tip also goes away.

To toggle cross-hairs use CIQ.ChartEngine.layout.crosshair. Set to true or false as needed.

Requires addOns.js; as well as markers.js or the bundle standard.js.

There can be only one CIQ.Tooltip per chart.

Color and layout can be customized via stx-hu-tooltip and related CSS classes. Defaults can be found in stx-chart.css.

CIQ.Tooltip automatically creates its own HTML inside the chart container. Here is an example of the structure (there will be one field tag per displayed element):


By default, the stx-hu-tooltip-field elements are inserted in the following order:

  • DT
  • Open
  • High
  • Low
  • Close
  • Volume
  • series
  • studies

But the default layout can be changed. You can override the order of fields or change the labels by manually inserting the HTML that the tooltip would otherwise have created for that field. If no override HTML is found for a particular field, the default will be used. This HTML must be placed inside the chart container.

All of the code is provided in addOns.js and can be fully customized by copying the source code from the library and overriding the functions with your changes. Be sure to never modify a library file as this will hinder upgrades.

For example, concatenating the field name ( ie: 'Jaw' ) with the study name ( ie: 'Alligator' ) is the default behavior of the tooltip for displaying the value title. Feel free to override this behavior by creating your own custom version of the renderFunction() for the CIQ.Tooltip. To do this, copy the entire CIQ.Tooltip code (found in addOns.js) and make the changes to your custom version. Load your custom version instead. Specifically, look for the following code in renderFunction() that pushes out the text for each study field:

var newFieldName = document.createElement("stx-hu-tooltip-field-name");

Replace fieldName with anything you want to use as the field title and push that instead.

Visual Reference:

Name Type Description
tooltipParams object

The constructor parameters.

Name Type Argument Description
stx CIQ.ChartEngine <optional>

The chart object.

ohl boolean <optional>

set to true to show OHL data (Close is always shown).

volume boolean <optional>

set to true to show Volume.

series boolean <optional>

set to true to show value of series.

studies boolean <optional>

set to true to show value of studies.

showOverBarOnly boolean <optional>

set to true to show tooltip only when over the primary line/bars.

change boolean <optional>

set to true to show the change in daily value when isDailyInterval

interpolation boolean <optional>

set to true to show the estimated value when there is no data between bars. Note that a value of null is not considered missing data.

useDataZone boolean <optional>

set to true to show the date in the dataZone, false to use the displayZone

  • 09-2016-19
  • 5.0.0 Now tooltipParams.showOverBarOnly available to show tooltip only when over the primary line/bars.
  • 5.1.1 [tooltipParams.change] set to true to show the change in daily value when displaying a daily interval.
  • 6.2.5 New interpolation flag to show estimated value for missing series data points.
  • 7.0.0 New useDataZone flag to show the DT in either the dataZone or displayZone date/time.

Adding a hover tool tip to a chart:

//First declare your chart engine
var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer")[0] });

//Then link the tooltip to that chart.
//Note how we've enabled OHL, Volume, Series and Studies.
new CIQ.Tooltip({ stx: stxx, ohl: true, volume: true, series: true, studies: true });

Customize the order, layout or text in tooltip labels:

// In this example, we've rearranged the HTML to display the Close field first, then the DT
// We are also labeling the DT 'Date/Time' and the Close 'Last'
// The rest of the fields will be then displayed in their default order.

	<stx-hu-tooltip-field field="Close">
	<stx-hu-tooltip-field field="DT">
// Sample CSS for the hover tool tip. Working sample found in stx-chart.css
stx-hu-tooltip {
	position: absolute;
	left: -50000px;
	z-index: 30;
	white-space: nowrap;
	padding: 6px;
	border: 1px solid gray;
	background-color: rgba(42, 81, 208, 0.5);
	color: white;

stx-hu-tooltip-field {
	display: table-row;

stx-hu-tooltip-field-name {
	display: table-cell;
	font-weight: bold;
	padding-right: 5px;

stx-hu-tooltip-field-name:after {
	content: ":";

stx-hu-tooltip-field-value {
	display: table-cell;
	text-align: right;