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.

Requires jquery and addOns.js; as well as markers.js to be bundled in chartiq.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):

<stx-hu-tooltip>
        <stx-hu-tooltip-field>
            <stx-hu-tooltip-field-name></stx-hu-tooltip-field-name>
            <stx-hu-tooltip-field-value></stx-hu-tooltip-field-value>
        </stx-hu-tooltip-field>
</stx-hu-tooltip>

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.

Visual Reference:
stx-hu-tooltip

Parameters:
Name Type Description
tooltipParams object

The constructor parameters

Properties
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

Since:

  • • 09-2016-19
Examples

Adding a hover tool tip to a chart:

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

//Then link the hoer 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 filed first, then the DT
// We are also labeling the DT 'Date/Time' and the Close 'Last'
// The rest of the fileds will be then displayed in their default order.

	  	<stx-hu-tooltip>
			<stx-hu-tooltip-field field="Close">
				<stx-hu-tooltip-field-name>Last</stx-hu-tooltip-field-name>
				<stx-hu-tooltip-field-value></stx-hu-tooltip-field-value>
			</stx-hu-tooltip-field>
			<stx-hu-tooltip-field field="DT">
				<stx-hu-tooltip-field-name>Date/Time</stx-hu-tooltip-field-name>
				<stx-hu-tooltip-field-value></stx-hu-tooltip-field-value>
			</stx-hu-tooltip-field>
		</stx-hu-tooltip>
// 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,.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;
		}