Floating Bar Tooltip
TradingView-style floating tooltip for detailed bar analysis on charts
Overview
Provides a floating tooltip that appears on long-press/hover, displaying OHLCV values and price change for any bar. Follows cursor movement for seamless data inspection across charts.
Features
Core Functionality
- Long-Press Activation: Touch or click-hold to activate tooltip
- Cursor Following: Tooltip follows mouse/finger across chart
- OHLCV Display: Open, High, Low, Close, Volume for selected bar
- Price Change: Percentage and absolute change from previous bar
- Multi-Timeframe: Works on any chart timeframe
Advanced Data
- Indicator Values: Show current indicator readings at bar
- Volume Analysis: Volume vs average, buy/sell pressure
- Time Info: Full timestamp, session info, day of week
- Custom Fields: Add any indicator value to tooltip
Styling Options
- Themes: Dark, light, custom colors
- Position: Auto-position to avoid chart edges
- Size: Compact, normal, detailed modes
- Opacity: Adjustable background transparency
Usage
// Enable floating tooltip
kit.chart.enableTooltip({
mode: 'detailed',
showIndicators: ['RSI', 'MACD', 'Volume'],
theme: 'dark',
delay: 300 // ms before showing
});
// Custom tooltip fields
kit.chart.addTooltipField('customRSI', (bar) => {
return `RSI: ${calculateRSI(bar, 14).toFixed(2)}`;
});
API Endpoints
| Method |
Endpoint |
Description |
| GET |
/api/chart/tooltip/config |
Get tooltip configuration |
| PUT |
/api/chart/tooltip/config |
Update tooltip settings |
| POST |
/api/chart/tooltip/fields |
Add custom tooltip field |
| DELETE |
/api/chart/tooltip/fields/:id |
Remove custom field |
Inspired By
TradingView 2025 Release - Floating tooltip for detailed bar analysis in Cursors menu.
1---2name: floating-bar-tooltip3description: Floating Bar Tooltip4---5# Floating Bar Tooltip67> TradingView-style floating tooltip for detailed bar analysis on charts89## Overview1011Provides a floating tooltip that appears on long-press/hover, displaying OHLCV values and price change for any bar. Follows cursor movement for seamless data inspection across charts.1213## Features1415### Core Functionality16- **Long-Press Activation:** Touch or click-hold to activate tooltip17- **Cursor Following:** Tooltip follows mouse/finger across chart18- **OHLCV Display:** Open, High, Low, Close, Volume for selected bar19- **Price Change:** Percentage and absolute change from previous bar20- **Multi-Timeframe:** Works on any chart timeframe2122### Advanced Data23- **Indicator Values:** Show current indicator readings at bar24- **Volume Analysis:** Volume vs average, buy/sell pressure25- **Time Info:** Full timestamp, session info, day of week26- **Custom Fields:** Add any indicator value to tooltip2728### Styling Options29- **Themes:** Dark, light, custom colors30- **Position:** Auto-position to avoid chart edges31- **Size:** Compact, normal, detailed modes32- **Opacity:** Adjustable background transparency3334## Usage3536```typescript37// Enable floating tooltip38kit.chart.enableTooltip({39 mode: 'detailed',40 showIndicators: ['RSI', 'MACD', 'Volume'],41 theme: 'dark',42 delay: 300 // ms before showing43});4445// Custom tooltip fields46kit.chart.addTooltipField('customRSI', (bar) => {47 return `RSI: ${calculateRSI(bar, 14).toFixed(2)}`;48});49```5051## API Endpoints5253| Method | Endpoint | Description |54|--------|----------|-------------|55| GET | /api/chart/tooltip/config | Get tooltip configuration |56| PUT | /api/chart/tooltip/config | Update tooltip settings |57| POST | /api/chart/tooltip/fields | Add custom tooltip field |58| DELETE | /api/chart/tooltip/fields/:id | Remove custom field |5960## Inspired By6162TradingView 2025 Release - Floating tooltip for detailed bar analysis in Cursors menu.