Interactive Tooltips Examples

This document demonstrates the enhanced tooltip system from Phase 3.8, showing custom formatting, positioning, multi-field display, and advanced tooltip features.

Tooltips automatically position themselves to stay within viewport bounds.

View Source

data:
  source: |
    product,sales,profit,margin
    Laptop,45000,12000,26.7
    Phone,38000,9500,25.0
    Tablet,22000,5500,25.0
    Monitor,15000,3800,25.3
    Keyboard,8000,2400,30.0
    Mouse,6000,1800,30.0
    Webcam,12000,3600,30.0
    Headphones,18000,5400,30.0

engine: plot
type: bar
x: product
y: sales

title: Product Sales (Hover for Details)
width: 700
height: 500

tooltip:
  enabled: true
  position: auto
  template: "{product}: ${sales:,.0f}"

marks:
  - type: bar
    configuration:
      x: product
      y: sales
      fill: "#3b82f6"

Features Demonstrated:

Auto-positioning to avoid viewport edges
Currency formatting with thousand separators
Simple template with field substitution
Hover trigger (default)

Display multiple data fields with formatted values.

View Source

data:
  source: |
    employee,salary,bonus,years,rating
    Alice,75000,8000,3,4.5
    Bob,82000,10000,5,4.8
    Carol,68000,6500,2,4.2
    Dave,95000,12000,8,4.9
    Eve,71000,7500,4,4.3
    Frank,88000,11000,6,4.7

engine: plot
type: scatter
x: years
y: salary

title: Employee Compensation (Hover for Full Details)
width: 700
height: 500

tooltip:
  enabled: true
  template: |
    Employee: {employee}
    Salary: ${salary:,.0f}
    Bonus: ${bonus:,.0f}
    Experience: {years} years
    Rating: {rating}/5.0

marks:
  - type: dot
    configuration:
      x: years
      y: salary
      r: bonus
      fill: rating

scales:
  r:
    range: [100, 500]
  fill:
    scheme: viridis
    label: Rating

Features Demonstrated:

Multi-line tooltip template
Multiple formatted fields
Currency and number formatting
Template with literal text

Format dates in tooltips using various date formats.

View Source

data:
  source: |
    date,revenue,transactions
    2024-01-01,125000,450
    2024-02-01,132000,475
    2024-03-01,128000,460
    2024-04-01,145000,510
    2024-05-01,138000,490
    2024-06-01,152000,530
    2024-07-01,148000,520
    2024-08-01,160000,560

engine: plot
type: line

marks:
  - type: line
    configuration:
      x: date
      y: revenue
      stroke: "#10b981"
      strokeWidth: 3
  - type: dot
    configuration:
      x: date
      y: revenue
      fill: "#10b981"
      r: 6

title: Monthly Revenue Trend (Hover for Date)
width: 700
height: 450

tooltip:
  enabled: true
  template: |
    Date: {date:date}
    Revenue: ${revenue:,.0f}
    Transactions: {transactions:,}
  position: top

Features Demonstrated:

Date formatting (:date format)
Fixed tooltip position (top)
Number formatting with thousand separators
Line + dot chart with tooltips

Example 4: Percentage Formatting

Display percentage values in tooltips.

View Source

data:
  source: |
    category,market_share,growth_rate,revenue
    Product A,35.5,12.3,2500000
    Product B,28.2,8.7,1950000
    Product C,18.9,15.2,1320000
    Product D,10.8,6.5,750000
    Product E,6.6,-3.2,460000

engine: plot
type: bar
x: category
y: market_share

title: Market Share by Product (Hover for Metrics)
width: 700
height: 500

tooltip:
  enabled: true
  template: |
    {category}
    Market Share: {market_share}%
    Growth Rate: {growth_rate:+.1f}%
    Revenue: ${revenue:,.0f}

marks:
  - type: bar
    configuration:
      x: category
      y: market_share
      fill: growth_rate

scales:
  fill:
    scheme: RdYlGn
    domain: [-5, 20]
    label: Growth Rate (%)

Features Demonstrated:

Percentage display
Signed number formatting (:+.1f)
Color scale based on growth rate
Multi-metric tooltip

Show different content based on data values.

View Source

data:
  source: |
    server,uptime,status,incidents
    Server-01,99.95,Healthy,2
    Server-02,99.87,Healthy,5
    Server-03,98.42,Warning,12
    Server-04,97.13,Critical,28
    Server-05,99.91,Healthy,3
    Server-06,98.89,Warning,8
    Server-07,99.99,Healthy,1
    Server-08,99.45,Healthy,6

engine: plot
type: bar
x: server
y: uptime

title: Server Uptime Monitoring
width: 700
height: 500

tooltip:
  enabled: true
  template: |
    {server}
    Uptime: {uptime}%
    Status: {status}
    Incidents: {incidents}
  backgroundColor: auto

marks:
  - type: bar
    configuration:
      x: server
      y: uptime
      fill: status

scales:
  fill:
    domain: [Healthy, Warning, Critical]
    range: ["#10b981", "#f59e0b", "#ef4444"]
    label: Status

Features Demonstrated:

Auto background color based on data
Status-based color encoding
Conditional visual feedback
Server monitoring use case

Access nested data structures in tooltips.

View Source

data:
  source: |
    city,temperature,humidity,wind_speed,condition
    Seattle,18,75,12,Cloudy
    Portland,20,70,8,Partly Cloudy
    San Francisco,22,65,15,Sunny
    Los Angeles,28,55,10,Sunny
    San Diego,26,60,14,Sunny
    Phoenix,35,30,5,Clear

engine: plot
type: scatter
x: temperature
y: humidity

title: Weather Conditions (Hover for Details)
width: 700
height: 500

tooltip:
  enabled: true
  template: |
    {city}
    Temperature: {temperature}°C
    Humidity: {humidity}%
    Wind: {wind_speed} km/h
    Condition: {condition}

marks:
  - type: dot
    configuration:
      x: temperature
      y: humidity
      r: wind_speed
      fill: condition

scales:
  r:
    range: [100, 400]
    label: Wind Speed
  fill:
    scheme: category10
    label: Condition

Features Demonstrated:

Multiple field access
Custom units in template
Size encoding (bubble chart)
Color by categorical field

Control when tooltips appear and disappear.

View Source

data:
  source: |
    task,start,duration,priority
    Task A,0,5,High
    Task B,3,4,Medium
    Task C,5,6,High
    Task D,7,3,Low
    Task E,9,5,Medium
    Task F,11,4,High

engine: plot
type: bar
x: task
y: duration

title: Task Duration (Delayed Tooltips)
width: 700
height: 450

tooltip:
  enabled: true
  showDelay: 500
  hideDelay: 200
  template: |
    {task}
    Duration: {duration} hours
    Priority: {priority}

marks:
  - type: bar
    configuration:
      x: task
      y: duration
      fill: priority

scales:
  fill:
    domain: [Low, Medium, High]
    range: ["#94a3b8", "#3b82f6", "#ef4444"]
    label: Priority

Features Demonstrated:

Show delay (500ms before appearing)
Hide delay (200ms before disappearing)
Priority-based coloring
Task management visualization

Customize tooltip appearance with colors and sizes.

View Source

data:
  source: |
    metric,value,target,variance
    Sales,95000,100000,-5
    Leads,450,400,+12.5
    Conversion,3.2,3.0,+6.7
    Revenue,125000,120000,+4.2
    Profit,28000,25000,+12.0

engine: plot
type: bar
x: metric
y: value

title: KPI Dashboard (Styled Tooltips)
width: 700
height: 500

tooltip:
  enabled: true
  template: |
    {metric}
    Actual: {value:,.0f}
    Target: {target:,.0f}
    Variance: {variance:+.1f}%
  backgroundColor: "#1f2937"
  textColor: "#f9fafb"
  borderColor: "#3b82f6"
  borderRadius: 8
  padding: 16
  fontSize: 14

marks:
  - type: bar
    configuration:
      x: metric
      y: value
      fill: variance

scales:
  fill:
    scheme: RdYlGn
    label: Variance (%)

Features Demonstrated:

Custom background color (dark)
Custom text color (light)
Border styling
Padding and font size
Signed variance display

Show tooltips on click instead of hover.

View Source

data:
  source: |
    country,gdp,population,area
    USA,21000,330,9.8
    China,14000,1400,9.6
    Japan,5000,126,0.38
    Germany,4000,83,0.36
    UK,3000,67,0.24
    India,3000,1380,3.3
    France,2800,65,0.64
    Brazil,2000,212,8.5

engine: plot
type: scatter
x: gdp
y: population

title: Country Comparison (Click for Info)
width: 700
height: 500

tooltip:
  enabled: true
  trigger: click
  template: |
    {country}
    GDP: ${gdp} billion
    Population: {population}M
    Area: {area}M km²

marks:
  - type: dot
    configuration:
      x: gdp
      y: population
      r: area
      fill: "#8b5cf6"

scales:
  r:
    range: [100, 600]
    label: Area

Features Demonstrated:

Click trigger instead of hover
Tooltip persists until next click
Bubble chart with area encoding
Country comparison visualization

Demonstrate different fixed tooltip positions.

View Source

data:
  source: |
    position,x,y
    top,1,3
    right,2,3
    bottom,3,3
    left,4,3
    auto,2.5,2

engine: plot
type: scatter
x: x
y: y

title: Tooltip Position Demo
width: 600
height: 500

tooltip:
  enabled: true
  position: auto
  template: "Position: {position}"

marks:
  - type: dot
    configuration:
      x: x
      y: y
      r: 30
      fill: position
  - type: text
    configuration:
      x: x
      y: y
      text: position
      fill: "#fff"
      fontSize: 14

scales:
  fill:
    scheme: category10

Features Demonstrated:

Auto-positioning behavior
Text marks with labels
Large dots for easy hovering
Position demonstration

API Reference

yaml

tooltip:
  enabled: true                      # Enable/disable tooltips
  trigger: hover | click             # Trigger type (default: hover)
  template: "{field}: {value}"       # Template string
  position: auto | top | bottom | left | right  # Position
  showDelay: 0                       # Delay before showing (ms)
  hideDelay: 0                       # Delay before hiding (ms)
  maxWidth: 300                      # Maximum width (px)
  backgroundColor: "#1f2937"         # Background color
  textColor: "#f9fafb"              # Text color
  borderColor: "#3b82f6"            # Border color
  borderRadius: 6                    # Border radius (px)
  padding: 12                        # Padding (px)
  fontSize: 13                       # Font size (px)

Template Formatting

Field Substitution

yaml

template: "{fieldName}"              # Basic field
template: "{nested.field}"           # Nested field access

Number Formatting

yaml

template: "{value:,.0f}"             # Thousand separators, no decimals
template: "{value:.2f}"              # Two decimal places
template: "{value:+.1f}"             # Signed number with one decimal

Currency Formatting

yaml

template: "${value:,.0f}"            # $1,234
template: "€{value:.2f}"            # €1234.56

Date Formatting

yaml

template: "{date:date}"              # Default date format
template: "{date:YYYY-MM-DD}"       # ISO date
template: "{date:MMM DD, YYYY}"     # Jan 01, 2024

Percentage Formatting

yaml

template: "{value}%"                 # Simple percentage
template: "{value:.1f}%"            # One decimal: 12.3%

Position Modes

auto: Automatically position to stay in viewport
top: Always position above the pointer
bottom: Always position below the pointer
left: Always position to the left
right: Always position to the right

Best Practices

Keep Tooltips Concise:
- Show only relevant information
- Use 3-5 fields maximum
- Format numbers appropriately
Choose Appropriate Triggers:
- hover: Quick exploration, high interactivity
- click: Detailed inspection, low interactivity
Format Data Properly:
- Use thousand separators for large numbers
- Show appropriate decimal places
- Include units (%, $, km, etc.)
Position Wisely:
- Use auto for most cases
- Use fixed positions for specific layouts
- Consider screen edges
Style for Readability:
- Ensure sufficient contrast
- Use appropriate font sizes
- Provide adequate padding
- Round corners for polish
Performance Considerations:
- Use delays to reduce tooltip flicker
- Limit tooltip complexity for large datasets
- Consider debouncing for frequent updates

Interactive Selection - Selection and highlighting
Crosshair Interactions - Pointer tracking

Examples created as part of Phase 3.8: Interactive Features

Interactive Tooltips Examples

Example 1: Basic Tooltip with Auto-Positioning

Example 2: Multi-Field Tooltip with Custom Template

Example 3: Tooltip with Date Formatting

Example 4: Percentage Formatting

Example 5: Conditional Tooltip Content

Example 6: Tooltip with Nested Field Access

Example 7: Tooltip Delay and Duration

Example 8: Custom Tooltip Styling

Example 9: Tooltip with Click Trigger

Example 10: Tooltip Positioning Options

API Reference

Tooltip Configuration

Template Formatting

Field Substitution

Number Formatting

Currency Formatting

Date Formatting

Percentage Formatting

Position Modes

Best Practices

Interactive Tooltips Examples ​

Example 1: Basic Tooltip with Auto-Positioning ​

Example 2: Multi-Field Tooltip with Custom Template ​

Example 3: Tooltip with Date Formatting ​

Example 4: Percentage Formatting ​

Example 5: Conditional Tooltip Content ​

Example 6: Tooltip with Nested Field Access ​

Example 7: Tooltip Delay and Duration ​

Example 8: Custom Tooltip Styling ​

Example 9: Tooltip with Click Trigger ​

Example 10: Tooltip Positioning Options ​

API Reference ​

Tooltip Configuration ​

Template Formatting ​

Field Substitution ​

Number Formatting ​

Currency Formatting ​

Date Formatting ​

Percentage Formatting ​

Position Modes ​

Best Practices ​

Related Examples ​

Interactive Tooltips Examples

Example 1: Basic Tooltip with Auto-Positioning

Example 2: Multi-Field Tooltip with Custom Template

Example 3: Tooltip with Date Formatting

Example 4: Percentage Formatting

Example 5: Conditional Tooltip Content

Example 6: Tooltip with Nested Field Access

Example 7: Tooltip Delay and Duration

Example 8: Custom Tooltip Styling

Example 9: Tooltip with Click Trigger

Example 10: Tooltip Positioning Options

API Reference

Tooltip Configuration

Template Formatting

Field Substitution

Number Formatting

Currency Formatting

Date Formatting

Percentage Formatting

Position Modes

Best Practices

Related Examples