Tooltip Component

The Tooltip component displays contextual information when users interact with chart elements, providing detailed data values and descriptions.

Purpose

Based on the source implementation in ~/workspace/source/src/component/tooltip/TooltipModel.ts, the tooltip component:

Displays data details on mouse hover or click events
Supports multiple trigger modes (item-based or axis-based)
Can render in HTML or canvas/SVG (richText) mode
Provides customizable formatting and styling
Includes axis pointer indicators for better data reference

Basic Usage

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    }
  },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [120, 200, 150]
  }]
};

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  series: [{
    type: 'pie',
    data: [
      { value: 335, name: 'Direct' },
      { value: 310, name: 'Email' },
      { value: 234, name: 'Ads' }
    ]
  }]
};

option = {
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      let result = params[0].axisValue + '<br/>';
      params.forEach(function(item) {
        result += item.marker + ' ' + item.seriesName + ': ' + item.value + '<br/>';
      });
      return result;
    },
    backgroundColor: 'rgba(50,50,50,0.7)',
    borderColor: '#333',
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    }
  }
};

Axis Pointer with Cross Style

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
        width: 1,
        type: 'dashed'
      }
    }
  },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [10, 20, 30] }]
};

Configuration Options

Core Properties

show

boolean

default:"true"

Whether to display the tooltip component. From TooltipModel.ts:99.

trigger

'item' | 'axis' | 'none'

default:"'item'"

Trigger type for tooltip:

'item': Triggered by data items (default)
'axis': Triggered by axes, shows all series at the same axis value
'none': No automatic trigger

Implementation in TooltipModel.ts:106.

triggerOn

string

default:"'mousemove|click'"

Conditions to trigger tooltip. Can be:

'mousemove': Trigger on mouse movement
'click': Trigger on click
'mousemove|click': Trigger on either event
'none': Manual trigger only

From TooltipModel.ts:109.

showContent

boolean

default:"true"

Whether to show tooltip content. Set to false to only show axis pointer without content box.See TooltipModel.ts:102.

Rendering Mode

renderMode

'auto' | 'html' | 'richText'

default:"'auto'"

Rendering mode for tooltip:

'auto': Use HTML by default, falls back to richText if document is unavailable
'html': Render tooltip as HTML DOM element
'richText': Render using canvas/SVG graphics

Implementation in TooltipModel.ts:113.

appendTo

function | string | HTMLElement

Specify where to append the tooltip DOM element. Only works when renderMode is ‘html’.

appendTo: document.body
// or
appendTo: 'body'
// or
appendTo: (chartContainer) => chartContainer.parentNode

From TooltipModel.ts:72.

className

string

CSS class name for the tooltip element. Only available when renderMode is ‘html’.See TooltipModel.ts:78.

Timing and Animation

showDelay

number

default:"0"

Delay in milliseconds before showing the tooltip. From TooltipModel.ts:120.

hideDelay

number

default:"100"

Delay in milliseconds before hiding the tooltip. From TooltipModel.ts:122.

transitionDuration

number

default:"0.4"

Animation transition duration in seconds. From TooltipModel.ts:125.

alwaysShowContent

boolean

default:"false"

Whether to always show tooltip content without hiding on mouse out.From TooltipModel.ts:111.

enterable

boolean

default:"false"

Whether the mouse can enter the tooltip area. Useful for interactive tooltips with links.Implementation in TooltipModel.ts:129.

Positioning

confine

boolean

default:"null"

Whether to confine tooltip within the chart area:

For renderMode: 'richText': defaults to true
For renderMode: 'html': defaults to false (for backward compatibility)

From TooltipModel.ts:118.

Styling

backgroundColor

ColorString

default:"tokens.color.neutral00"

Background color of the tooltip. Default from TooltipModel.ts:131.

borderColor

ColorString

Border color of the tooltip. Can use defaultBorderColor for multi-series scenarios.

borderWidth

number

default:"1"

Border width of the tooltip in pixels. From TooltipModel.ts:143.

borderRadius

number

default:"4"

Border radius of the tooltip in pixels. From TooltipModel.ts:140.

padding

number | number[]

default:"null"

Padding inside the tooltip. Can be:

Single number for all sides
Array [top, right, bottom, left]

See TooltipModel.ts:150.

shadowBlur

number

default:"10"

Shadow blur size for the tooltip box. From TooltipModel.ts:134.

shadowColor

string

default:"'rgba(0, 0, 0, .2)'"

Shadow color for the tooltip box. From TooltipModel.ts:135.

shadowOffsetX

number

default:"1"

Horizontal shadow offset. From TooltipModel.ts:136.

shadowOffsetY

number

default:"2"

Vertical shadow offset. From TooltipModel.ts:137.

textStyle

object

Text style configuration. Default from TooltipModel.ts:183-186:

textStyle: {
  color: tokens.color.tertiary,
  fontSize: 14
}

extraCssText

string

default:"''"

Extra CSS text to apply to the tooltip. Only works in HTML render mode.

extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'

From TooltipModel.ts:153.

Content Formatting

formatter

string | function

Tooltip content formatter. Can be:String template with variables:

{a}: series name
{b}: data name / category
{c}: data value
{d}: percentage (for pie charts)

formatter: '{b}: {c}'

Function for custom formatting:

formatter: function(params) {
  return params.name + ': ' + params.value;
}

order

TooltipOrderMode

Order of items in tooltip when trigger: 'axis'. Controls how multiple series are sorted.

Axis Pointer

axisPointer

object

Axis pointer configuration. Used when trigger: 'axis'. From TooltipModel.ts:156-182:

axisPointer.type

'line' | 'shadow' | 'cross'

default:"'line'"

Type of axis pointer indicator. From TooltipModel.ts:159.

axisPointer.axis

'auto' | 'x' | 'y' | 'angle' | 'radius'

default:"'auto'"

Which axis the pointer should follow. ‘auto’ selects category axis by default.Implementation in TooltipModel.ts:165.

axisPointer.animation

boolean | 'auto'

default:"'auto'"

Whether to enable animation for axis pointer movement. From TooltipModel.ts:167.

axisPointer.animationDurationUpdate

number

default:"200"

Animation duration for pointer updates in milliseconds. From TooltipModel.ts:168.

axisPointer.animationEasingUpdate

string

default:"'exponentialOut'"

Easing function for pointer animation. From TooltipModel.ts:169.

axisPointer.crossStyle

object

Style for cross pointer. From TooltipModel.ts:171-178:

crossStyle: {
  color: tokens.color.borderShade,
  width: 1,
  type: 'dashed',
  textStyle: {}
}

Advanced Features

Multi-Series Default Border

defaultBorderColor

string

Default border color when there are multiple series. Useful for maintaining visual consistency.From TooltipModel.ts:145.

Rich Text Rendering

When using renderMode: 'richText', tooltips are rendered using canvas/SVG, which provides:

Better performance with large datasets
No DOM manipulation overhead
Consistent rendering across environments
Automatic confinement to chart bounds

option = {
  tooltip: {
    trigger: 'axis',
    showContent: true,
    renderMode: 'html',
    triggerOn: 'mousemove',
    showDelay: 0,
    hideDelay: 100,
    transitionDuration: 0.4,
    enterable: false,
    confine: false,
    backgroundColor: 'rgba(50, 50, 50, 0.9)',
    borderColor: '#333',
    borderWidth: 1,
    borderRadius: 4,
    padding: [10, 15],
    textStyle: {
      color: '#fff',
      fontSize: 14
    },
    formatter: function(params) {
      let html = '<div style="font-weight: bold;">' + params[0].axisValue + '</div>';
      params.forEach(function(item) {
        html += '<div>' + item.marker + ' ' + item.seriesName + ': ' + item.value + '</div>';
      });
      return html;
    },
    axisPointer: {
      type: 'cross',
      axis: 'auto',
      animation: true,
      animationDurationUpdate: 200,
      crossStyle: {
        color: '#999',
        width: 1,
        type: 'dashed'
      }
    }
  },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [
    { name: 'Sales', type: 'line', data: [120, 200, 150, 80, 70] },
    { name: 'Revenue', type: 'line', data: [100, 180, 130, 90, 60] }
  ]
};

Coordinate Systems

Axes

Interactive Components

Visual Components

Purpose

Basic Usage

Item Trigger Tooltip

Custom Tooltip Content

Axis Pointer with Cross Style

Configuration Options

Core Properties

Rendering Mode

Timing and Animation

Positioning

Styling

Content Formatting

Axis Pointer

Advanced Features

Multi-Series Default Border

Rich Text Rendering

Example: Complete Tooltip Configuration

Build docs developers (and LLMs) love

Coordinate Systems

Axes

Interactive Components

Visual Components

Documentation Index

​Purpose

​Basic Usage

​Item Trigger Tooltip

​Custom Tooltip Content

​Axis Pointer with Cross Style

​Configuration Options

​Core Properties

​Rendering Mode

​Timing and Animation

​Positioning

​Styling

​Content Formatting

​Axis Pointer

​Advanced Features

​Multi-Series Default Border

​Rich Text Rendering

​Example: Complete Tooltip Configuration

Build docs developers (and LLMs) love

Purpose

Basic Usage

Item Trigger Tooltip

Custom Tooltip Content

Axis Pointer with Cross Style

Configuration Options

Core Properties

Rendering Mode

Timing and Animation

Positioning

Styling

Content Formatting

Axis Pointer

Advanced Features

Multi-Series Default Border

Rich Text Rendering

Example: Complete Tooltip Configuration