Basic Tooltips (Styles)
The tooltip system is fully customizable. Use the style object to easily override background colors, text colors, borders, shadows, blur effects, and fonts to match your application's design system.
Subtype
▾
Live Preview
Edit JSON above · auto-previews after 0.9 s
The standard tooltip style automatically adapts to your chart's theme (light or dark mode). It features a subtle backdrop blur, matching borders, and rounded corners by default.
Styling via Declarative API
You can pass a style prop directly to the <Tooltip> component to apply any of the custom aesthetics shown above.
Dark Mode Override
import { Chart, Bar, Tooltip } from 'radiant-charts';
<Chart data={data}>
<Bar xKey="month" yKey="revenue" fill="#10b981" />
<Tooltip
style={{
background: 'rgba(15,23,42,0.95)',
color: '#f8fafc',
borderColor: '#334155',
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.5)',
}}
/>
</Chart>Light & Minimalist
import { Chart, Line, Tooltip } from 'radiant-charts';
<Chart data={data}>
<Line xKey="date" yKey="price" stroke="#f59e0b" />
<Tooltip
bulletShape="circle"
style={{
background: '#ffffff',
color: '#0f172a',
borderColor: '#ffffff',
boxShadow: '0 20px 25px -5px rgba(0,0,0,0.1)',
backdropBlur: 0,
borderRadius: 4,
}}
/>
</Chart>Heavy Glassmorphism
import { Chart, Area, Tooltip } from 'radiant-charts';
<Chart data={data}>
<Area xKey="month" yKey="revenue" fill="rgba(236,72,153,0.2)" stroke="#ec4899" />
<Tooltip
style={{
background: 'rgba(255,255,255,0.4)',
color: '#1e293b',
borderColor: 'rgba(255,255,255,0.5)',
boxShadow: '0 4px 30px rgba(0,0,0,0.1)',
backdropBlur: 12,
borderRadius: 16,
}}
/>
</Chart>Terminal (Monospace)
import { Chart, Scatter, Tooltip } from 'radiant-charts';
<Chart data={data}>
<Scatter xKey="height" yKey="weight" fill="#06b6d4" />
<Tooltip
mode="item"
bulletShape="square"
style={{
background: '#020617',
color: '#22d3ee',
borderColor: '#0891b2',
borderRadius: 0,
fontFamily: 'monospace',
backdropBlur: 0,
}}
/>
</Chart>Was this article helpful?