logo

Ant Design Charts

  • Manual
  • Components
  • Examples
  • Options
  • Productsantv logo arrow
  • 2.4.0
  • Common Configuration Statistical Charts
    • 标题(Title)
    • Axis
    • Legend
    • Scrollbar
    • Slider
    • Tooltip
    • Label
    • Color
    • event
    • Interaction
      • Overview
      • brushAxisHighlight
      • brushHighlight
      • brushXHighlight
      • brushYHighlight
      • brushFilter
      • brushXFilter
      • brushYFilter
      • chartIndex
      • elementHighlight
      • elementHighlightByColor
      • elementHighlightByX
      • elementSelect
      • elementSelectByColor
      • elementSelectByX
      • fisheye
      • legendFilter
      • legendHighlight
      • poptip
      • scrollbarFilter
      • sliderFilter
    • State
    • Style
    • Scale
      • overview
      • band
      • linear
      • log
      • ordinal
      • point
      • pow
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
    • Animate
      • overview
      • fadeIn
      • fadeOut
      • growInX
      • growInY
      • morphing
      • pathIn
      • scaleInX
      • scaleInY
      • scaleOutX
      • scaleOutY
      • waveIn
      • zoomIn
      • zoomOut
    • Theme
      • overview
      • Academy
      • classic
      • classicDark
    • Data
      • overview
      • custom
      • ema
      • fetch
      • filter
      • fold
      • inline
      • join
      • kde
      • log
      • map
      • pick
      • rename
      • slice
      • sort
      • sortBy

Tooltip

Previous
Slider
Next
Label

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

In Ant Design Charts, the Tooltip can provide additional information about data points, helping users better understand and interpret visualization. In visualization, Tooltip usually has the following roles:

  • Display detailed information: Tooltip can display detailed information about data points, such as specific values, percentages, or other related attributes. This helps users understand the data more deeply.
  • Improve readability: In complex visualizations, Tooltip can help users more easily identify and understand data points. For example, in a scatter plot, when data points are dense, Tooltip can display detailed information of a specific point without having to hover the mouse over each point.
  • Enhance interactivity: Tooltip can enhance the interactivity of visualization. Users can view more information by hovering over or clicking on data points, making the visualization more dynamic and interesting.
  • Highlight key information: Tooltip can be used to highlight key information. For example, in a time series chart, you can use Tooltip to display important events or mutations at specific time points.

In Ant Design Charts, you can specify the tooltip information that this mark needs to display through mark.tooltip.

({
tooltip: {
title: 'name', // title
items: ['genre'], // data items
},
});

When there is only one mark in this view, you can also configure the rendering and additional configuration of tooltip information through mark.interaction.tooltip.

({
interaction: {
tooltip: { series: true },
},
});

More options about tooltip, see the document of tooltip.