Tooltip is not displayed

[atri110]

Lightweight Charts Version: 2.0.0

Steps/code to reproduce:

I want to add a tooltip to my chart, but I don't know why it's not displayed. It's possible that I have something wrong with the code.

var width = 1250;
var height = 600;

var chart = LightweightCharts.createChart(document.querySelector('#hunt-chart'), {
	width: width,
	height: height,
	priceScale: {
		scaleMargins: {
			top: 0.2,
			bottom: 0.2,
		},
		borderVisible: false,
	},
	timeScale: {
		borderVisible: false,
	},
	layout: {
		backgroundColor: '#ffffff',
		textColor: '#333',
	},
	grid: {
		horzLines: {
			color: '#eee',
		},
		vertLines: {
			color: '#ffffff',
		},
	},
});

var areaSeries = chart.addAreaSeries({
  topColor: 'rgba(255, 82, 82, 0.56)',
  bottomColor: 'rgba(255, 82, 82, 0.04)',
  lineColor: 'rgba(255, 82, 82, 1)',
  lineWidth: 2,
	symbol: 'AAPL',
});

areaSeries.setData([
	{ time: '2016-07-18', value: 98.66 },
	{ time: '2016-07-25', value: 104.21 },
	{ time: '2016-08-01', value: 107.48 },
	{ time: '2016-08-08', value: 108.18 },
	{ time: '2016-08-15', value: 109.36 },
	{ time: '2016-08-22', value: 106.94 },
	{ time: '2016-08-29', value: 107.73 },
	{ time: '2016-09-05', value: 103.13 },
	{ time: '2016-09-12', value: 114.92 },
	{ time: '2016-09-19', value: 112.71 },
	{ time: '2016-09-26', value: 113.05 },
	{ time: '2016-10-03', value: 114.06 },
	{ time: '2016-10-10', value: 117.63 },
	{ time: '2016-10-17', value: 116.60 },
	{ time: '2016-10-24', value: 113.72 },
	{ time: '2016-10-31', value: 108.84 },
	{ time: '2016-11-07', value: 108.43 },
	{ time: '2016-11-14', value: 110.06 },
	{ time: '2016-11-21', value: 111.79 },
	{ time: '2016-11-28', value: 109.90 },
	{ time: '2016-12-05', value: 113.95 },
	{ time: '2016-12-12', value: 115.97 },
	{ time: '2016-12-19', value: 116.52 },
	{ time: '2016-12-26', value: 115.82 },
	{ time: '2017-01-02', value: 117.91 },
	{ time: '2017-01-09', value: 119.04 },
	{ time: '2017-01-16', value: 120.00 },
	{ time: '2017-01-23', value: 121.95 },
	{ time: '2017-01-30', value: 129.08 },
	{ time: '2017-02-06', value: 132.12 },
	{ time: '2017-02-13', value: 135.72 },
	{ time: '2017-02-20', value: 136.66 },
	{ time: '2017-02-27', value: 139.78 },
	{ time: '2017-03-06', value: 139.14 },

]);

function businessDayToString(businessDay) {
	return businessDay.year + '-' + businessDay.month + '-' + businessDay.day;
}

var toolTipWidth = 100;
var toolTipHeight = 80;
var toolTipMargin = 15;

var toolTip = document.createElement('div');
toolTip.className = 'floating-tooltip-2';
container.appendChild(toolTip);


// update tooltip
chart.subscribeCrosshairMove(function(param) {
	if (!param.time || param.point.x < 0 || param.point.x > width || param.point.y < 0 || param.point.y > height) {
		toolTip.style.display = 'none';
		return;
	}

	var dateStr = LightweightCharts.isBusinessDay(param.time)
		? businessDayToString(param.time)
		: new Date(param.time * 1000).toLocaleDateString();

	toolTip.style.display = 'block';
	var price = param.seriesPrices.get(areaSeries);
	toolTip.innerHTML = '<div style="color: rgba(255, 70, 70, 1)">Apple Inc.</div>' +
		'<div style="font-size: 24px; margin: 4px 0px">' + Math.round(price * 100) / 100 + '</div>' +
		'<div>' + dateStr + '</div>';

	var y = param.point.y;

	var left = param.point.x + toolTipMargin;
	if (left > width - toolTipWidth) {
		left = param.point.x - toolTipMargin - toolTipWidth;
	}

	var top = y + toolTipMargin;
	if (top > height - toolTipHeight) {
		top = y - toolTipHeight - toolTipMargin;
	}

	toolTip.style.left = left + 'px';
	toolTip.style.top = top + 'px';
});

[timocov]

I think it's better to ask such questions on stackoverflow or in discord chat.

[timocov]

Tooltip isn't part of lightweight-charts package.