Class: Tooltip

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.innerText = stx.translateIf(fieldName);
	newField.appendChild(newFieldName);

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

Visual Reference:

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.

// 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 });

// 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>

.hu-tooltip {
		position: absolute;
		left: -50000px;
		right: auto;
		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;
	}