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:
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
|
- 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 thedataZone
ordisplayZone
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 newtooltipParams.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
andvolume
.
Examples
// 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;
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;
}