Customizing the toolTip addOn.

This implementation illustrates how the toolTip addOn can be overwritten to customize its functionality. In this case, we are setting the Volume's precision to 4 decimal places.

by sonylnagale

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import "https://jsfiddle.chartiq.com/chart/js/addOns.js";

/****************** override the Tooltip addOn to make any adjustments you want in format and layout *********************/
	CIQ.Tooltip = function (tooltipParams) {
			if (!CIQ.Marker) {
				console.warn(
					"CIQ.Tooltip addon requires CIQ.Marker module to be enabled."
				);
				return;
			}

			var stx = tooltipParams.stx;
			var showOhl = tooltipParams.ohl;
			var showChange = tooltipParams.change;
			var showVolume = tooltipParams.volume;
			var showSeries = tooltipParams.series;
			var showStudies = tooltipParams.studies;
			var showOverBarOnly = tooltipParams.showOverBarOnly;
			var showInterpolation = tooltipParams.interpolation;
			var useDataZone = tooltipParams.useDataZone;
      
      //// make format function list -sn
      
      const formatFunctions = tooltipParams.formatFunctions;

			var node = stx.chart.container.querySelector("stx-hu-tooltip");
			if (!node) {
				node = document.createElement("stx-hu-tooltip");
				stx.chart.container.appendChild(node);
			}
			CIQ.Marker.Tooltip = function (params) {
				if (!this.className) this.className = "CIQ.Marker.Tooltip";
				params.label = "tooltip";
				CIQ.Marker.call(this, params);
			};

			CIQ.inheritsFrom(CIQ.Marker.Tooltip, CIQ.Marker, false);

			CIQ.Marker.Tooltip.sameBar = function (bar1, bar2) {
      
      	/************* custom code to force the tooltip toupdate even withn the same bar  *********/
      	return false;
        /********************************** end custom code  **************************************/
        
				if (!bar1 || !bar2) return false;
				if (+bar1.DT != +bar2.DT) return false;
				if (bar1.Close != bar2.Close) return false;
				if (bar1.Open != bar2.Open) return false;
				if (bar1.Volume != bar2.Volume) return false;
				return true;
			};

			CIQ.Marker.Tooltip.placementFunction = function (params) {
				var offset =...