Version: 1.0.0
Tooltips
Build highly interactive tooltips that hover next to the crosshair intersection.
Introduction
Unlike static legends, tooltips follow cursor hover movements across the chart pane, displaying coordinate details (dates, OHLCA, oscillator outputs) next to the active crosshair coordinates.
HTML Markup
Define a lightweight floating container overlay absolute to your chart wrapper:
<div class="relative w-full h-[500px]">
<!-- Floating Tooltip card -->
<div id="chart-tooltip" class="absolute hidden bg-zinc-950/90 border border-zinc-800 p-3 rounded-xl shadow-2xl text-xs text-zinc-300 z-30 pointer-events-none w-32">
<div class="font-bold text-white mb-1" id="tooltip-date">--:--</div>
<div>Price: <span id="tooltip-price" class="text-brand font-bold">0.00</span></div>
</div>
<div id="chart-mount" class="w-full h-full"></div>
</div>Cursor Tracking Logic
Listen to cursor updates and position the tooltip box using offset pixels:
const tooltip = document.getElementById('chart-tooltip');
const tDate = document.getElementById('tooltip-date');
const tPrice = document.getElementById('tooltip-price');
chart.subscribeCrosshairMove((param) => {
if (!param.point || !param.seriesData || param.seriesData.length === 0) {
tooltip.classList.add('hidden'); // Hide if cursor left canvas
return;
}
tooltip.classList.remove('hidden');
// Offset position coordinates (15px to right and bottom of cursor)
tooltip.style.left = (param.point.x + 15) + 'px';
tooltip.style.top = (param.point.y + 15) + 'px';
// Read current point values
const bar = param.seriesData[0];
tPrice.innerText = bar.close.toFixed(2);
tDate.innerText = String(bar.time);
});Aesthetics & Sizing
Ensure that your tooltip container is styled using pointer-events-none, otherwise hovering over the tooltip card will trigger mouse-exit events on the underlying chart canvas, causing flickering.