API Reference
Namespaces
Classes
Events
Global
Externals

Class: Tooltip

CIQ. Tooltip


new Tooltip(tooltipParams)

Add-on that creates a detailed tooltip as the user's mouse hovers over data points on the chart. The tooltip contains information such as the open, high, low, and close prices of stock quotes.

Starting with version 8.8.0, this tooltip uses different HTML and CSS. See 8.7.0 to 8.8.0 upgrade notes for details. All information and instructions on this page are based on 8.8.0 and newer.

Tooltip example:

Note: Prior to version 8.2.0, the tooltip was directly linked to the crosshairs. The crosshairs had to be active for the tooltip to be displayed.

Requires addOns.js and markers.js, or the bundle standard.js.

There can be only one CIQ.Tooltip per chart.

Color and layout can be customized by overriding the CSS rule-sets defined for the .hu-tooltip and related type selectors in stx-chart.css. Do not modify stx-chart.css; create a separate style sheet file that overrides stx-chart.css in the CSS cascade. See the example below.

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):

	<table class="hu-tooltip">
		<caption>Tooltip</caption>
		<tr field class="hu-tooltip-sr-only">
			<th>Field</th>
			<th>Value</th>
		</tr>
		<tr hu-tooltip-field="xxx">
			<td class="hu-tooltip-name"></td>
			<td class="hu-tooltip-value"></td>
		</tr>
	</table>

By default, the field rows 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 is used. Note: 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 (e.g., "Jaw") with the study name (e.g., "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 the renderFunction() that pushes out the text for each study field:

	newFieldName.classList.add("hu-tooltip-name");
	newFieldName.innerHTML = stx.translateIf(fieldName);
	newField.appendChild(newFieldName);

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

Visual Reference:
hu-tooltip

For the parameters ohl and volume, the following values are accepted:

  • true - data is always displayed.
  • false - data is never displayed.
  • null - data is only displayed where relevant to the plots on the chart.
Parameters:
Name Type Description
tooltipParams object

The constructor parameters.

Properties
Name Type Argument Default Description
stx CIQ.ChartEngine <optional>

The chart object.

ohl boolean | null <optional>

Setting for OHL data (Close is always shown).

volume boolean | null <optional>

Setting for Volume.

series boolean <optional>

Set to true to show value of series.

studies boolean <optional>

Set to true to show value of studies.

signalStudies boolean <optional>

Set to true to show value of signalling studies even when they are hidden.

showOverBarOnly boolean <optional>

Set to true to show the tooltip only when the mouse is over the primary line/bars.

change boolean <optional>

Set to true to show the change in daily value when the internal chart periodicity is a daily interval (see CIQ.ChartEngine.isDailyInterval).

interpolation boolean <optional>

Set to true to show the estimated value when there is no data between bars. Note: A value of null is not considered missing data.

useDataZone boolean <optional>

Set to true to show the date in the dataZone time zone; false, to use the displayZone time zone (see CIQ.ChartEngine#setTimeZone).

showBarHighlight boolean <optional>
true

Specifies whether the bar (data point) the mouse is hovering over is highlighted. Applies to the floating tooltip only (the dynamic tooltip points to the bar). If the crosshairs are active, this parameter is ignored.

caption string <optional>

Set to caption text for assistive technologies

Since:
  • 09-2016-19
  • 5.0.0 Now tooltipParams.showOverBarOnly is 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 tooltipParams.interpolation flag to show estimated value for missing series data points.
  • 7.0.0 New tooltipParams.useDataZone flag to show the date in either the dataZone or displayZone date/time.
  • 8.2.0 Decoupled CIQ.Tooltip from the crosshairs and added highlighting of the data point (or bar) the mouse is hovering over. The new tooltipParams.showBarHighlight parameter enables or disables the highlighting.
  • 8.6.0 New tooltipParams.signalStudies flag to show the value of signaling studies even when they are hidden.
  • 8.8.0 Added tooltipParams.caption parameter; changed HTML elements related to tooltip.
  • 9.1.2 added null state for parameters ohl and volume.
Examples

Add a tooltip to a chart:

// First declare your chart engine.
const 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 are displayed in their default order.

		<!-- tooltip markup is required only if addon tooltip is used and customization is required -->
		<table class="hu-tooltip">
			<caption>Tooltip</caption>
			<tr hu-tooltip-field class="hu-tooltip-sr-only"> <th>Field</th>                             <th>Value</th>                     </tr>
			<tr hu-tooltip-field="DT">                       <td class="hu-tooltip-name">Date/Time</td> <td class="hu-tooltip-value"></td> </tr>
			<tr hu-tooltip-field="Close">                    <td class="hu-tooltip-name"></td>          <td class="hu-tooltip-value"></td> </tr>
		</table>

Customize the CSS for the tooltip (see stx-chart.css):

.hu-tooltip {
		position: absolute;
		left: -50000px;
		z-index: 30;
		white-space: nowrap;
		padding: 6px;
		border: 2px solid #4ea1fe;
		background-color: rgba(255,255,255,.9);
		color: #000;
		font-size: 14px;
	}

	.hu-tooltip [hu-tooltip-field]:first-of-type * {
		padding-top: 5px;
	}
	.hu-tooltip [hu-tooltip-field]:last-of-type * {
		padding-bottom: 5px;
	}

	.hu-tooltip .hu-tooltip-name {
		text-align: left;
)		padding: 0 5px;
		font-weight: bold;
	}
	.hu-tooltip .hu-tooltip-name:after {
		content:':';
	}

	.hu-tooltip .hu-tooltip-value {
		text-align: right;
		padding: 0 5px;
	}