Tooltip configuration

Tooltip Configuration

In ECharts, the tooltip is an information box that appears when users hover over chart elements, displaying detailed information about data points. Flexible configuration of the tooltip can significantly enhance the interactive experience of data visualization.

Basic Configuration

The simplest tooltip configuration only requires enabling its display:

option = {
  tooltip: {
    show: true
  },
  series: [
    {
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};

This will show a default-formatted tooltip when hovering, including the series name, data name, and value.

Trigger Methods

The tooltip supports multiple trigger methods:

tooltip: {
  trigger: 'item', // Triggered by data item graphics
  // trigger: 'axis', // Triggered by axis
  // trigger: 'none', // No triggering
  axisPointer: {
    type: 'shadow' // Shadow indicator
    // type: 'line' // Line indicator
    // type: 'cross' // Crosshair indicator
  }
}

• item: Suitable for scatter plots, pie charts, and other discrete data.
• axis: Suitable for line charts, bar charts, and other continuous data.
• none: Fully manual control of tooltip display.

Content Formatting

The tooltip supports rich formatting options:

tooltip: {
  formatter: function(params) {
    return `
      <div style="font-weight:bold">${params.name}</div>
      <div>Value: ${params.value}</div>
      <div>Percentage: ${(params.percent || 0)}%</div>
    `;
  }
}

For multi-series data, an array-formatted params can be used:

tooltip: {
  formatter: function(params) {
    let result = params[0].name + '<br/>';
    params.forEach(item => {
      result += `${item.seriesName}: ${item.value}<br/>`;
    });
    return result;
  }
}

Appearance Customization

The tooltip's style can be fully customized:

tooltip: {
  backgroundColor: 'rgba(50,50,50,0.7)',
  borderColor: '#333',
  borderWidth: 1,
  textStyle: {
    color: '#fff',
    fontSize: 14
  },
  padding: [10, 15],
  extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.5);'
}

Position Control

The tooltip's position can be controlled in various ways:

tooltip: {
  position: function(pos, params, dom, rect, size) {
    // pos is the mouse position
    // size is the tooltip size
    return [pos[0] - size.contentSize[0] / 2, pos[1] - size.contentSize[1] - 10];
  }
}

Or use a fixed position:

tooltip: {
  position: [10, 10], // Relative to the top-left corner of the container
  confine: true // Restrict to the chart area
}

Advanced Features

Delayed Display

tooltip: {
  showDelay: 100, // Display delay (ms)
  hideDelay: 100 // Hide delay (ms)
}

Custom Rendering

tooltip: {
  renderMode: 'richText', // Or 'html'
  className: 'custom-tooltip' // Custom CSS class
}

Multi-Axis Tooltip

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'cross',
    label: {
      backgroundColor: '#6a7985'
    }
  }
}

Practical Examples

Combined Chart Tooltip

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation'
    },
    {
      type: 'value',
      name: 'Temperature'
    }
  ],
  series: [
    {
      name: 'Precipitation',
      type: 'bar',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 1,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3]
    }
  ]
};

Custom Pie Chart Tooltip

tooltip: {
  trigger: 'item',
  formatter: '{a} <br/>{b}: {c} ({d}%)',
  position: ['50%', '50%']
}

Map Tooltip

tooltip: {
  trigger: 'item',
  formatter: function(params) {
    return params.name + ' : ' + (params.value || 0);
  }
}

Performance Optimization

For large data scenarios, tooltip performance can be optimized:

tooltip: {
  animation: false, // Disable animation
  transitionDuration: 0, // No transition effect
  throttleInterval: 100 // Throttle interval
}

Mobile Adaptation

Special configurations for mobile devices:

tooltip: {
  enterable: true, // Allow mouse to enter the tooltip
  extraCssText: 'max-width: 80%;', // Limit maximum width
  textStyle: {
    fontSize: '12px' // Reduce font size
  }
}

Interaction Extension

Combine with other components for complex interactions:

tooltip: {
  trigger: 'axis',
  axisPointer: {
    link: {xAxisIndex: 'all'}, // Link multiple x-axes
    snap: true // Automatically snap to data points
  }
}

Dynamic Updates

Tooltips can be dynamically controlled via API:

// Show tooltip
myChart.dispatchAction({
  type: 'showTip',
  seriesIndex: 0,
  dataIndex: 1
});

// Hide tooltip
myChart.dispatchAction({
  type: 'hideTip'
});

Theme Integration

Tooltip styles can be integrated into themes:

echarts.registerTheme('myTheme', {
  tooltip: {
    backgroundColor: '#242424',
    borderColor: '#454545',
    textStyle: {
      color: '#e0e0e0'
    }
  }
});