Tooltip

1 min read

🎨 Go to AntV 设计 | 提示信息 Tooltip of 墨者学院 to learn more about Design guide.

Tooltip

tooltip

Properties - TooltipCfg

fields
optional string[]

Specifies the fields to be displayed in the Tooltip. By default, different charts have different default field lists. Use with the 'formatter' configuration for more effect.

tooltip: {
  fields: ['x', 'y'],
}
formatter
optional Function

Formats the contents of the Tooltip Item (you can use customContent when content contains multiple tooltipItems).

tooltip: {
  formatter: (datum: Datum) => {
    return { name: datum.x, value: datum.y + '%' };
  },
}
follow
optional boolean default: true

Sets whether the Tooltip content box follows the mouse.

enterable
optional boolean default: false

Whether the tooltip allows mouse to slide in.

showTitle
optional boolean default: false

Whether show tooltip title.

title
optional string

Set the title content of the Tooltip: If the value is the name of the data field, the value for the field in the data is displayed, and if the field does not exist in the data, the title value is displayed directly.

position
optional top | bottom | left | right

Sets the fixed display location of the Tooltip relative to the data point.

shared
optional boolean

True means that all data corresponding to the current point is merged and displayed, while false means that only the data content closest to the current point is displayed.

showCrosshairs
optional boolean default: false

Whether show crosshairs。

crosshairs
optional object

Configure tooltip crosshairs to work if and only if 'showCrosshairs' is true.

PropertiesTypeDescription
type'x' | 'y' | 'xy'Crosshairs Type: 'X' represents the auxiliary line on the X axis, 'Y' on the Y axis
linelineStyleThe configuration item for line, see more ShapeAttrs
textTooltipCrosshairsText | TooltipCrosshairsTextCallbackText configuration of crosshairs pointer, support callback
textBackgroundtextBackgroundStyleGuideline text background configuration
followbooleanWhether the guide line follows the mouse. Default is false, that is, to locate the data point

TooltipCrosshairsText 类型定义如下:

/** 辅助线文本配置 */
type TooltipCrosshairsText = {
  /**
   * 文本位置,只支持 start, end
   * @type {string}
   */
  position?: string;
  /**
   * 文本内容
   */
  content?: string;
  /**
   * 距离线的距离
   * @type {number}
   */
  offset?: number;
  /**
    * 是否自动旋转
    * @type {boolean}
    */
  autoRotate?: boolean;
  /**
    * 文本的配置项
    * @type {ShapeAttrs}
    */
  style?: TextStyle;
}

其中,TextStyle 类型定义详见: 通用文本样式

TooltipCrosshairsTextCallback 类型定义如下:

/**
 * 辅助线文本回调函数
 * @param type 对应当前 crosshairs 的类型,值为 'x' 或者 'y'
 * @param defaultContent 对应当前 crosshairs 默认的文本内容
 * @param items 对应当前 tooltip 内容框中的数据
 * @param currentPoint 对应当前坐标点
 * @returns 返回当前 crosshairs 对应的辅助线文本配置
 */
type TooltipCrosshairsTextCallback = (type: string, defaultContent: any, items: any[], currentPoint: Point) => TooltipCrosshairsText;

TextBackgroundStyle

PropertiesTypeDescription
paddingnumber | number[]White space around the background of a text
styleshapeStyleThe configuration item for line, see more ShapeAttrs
showMarkers
optional boolean default: true

Whether to render TooltipMarkers.

marker
optional ShapeAttrs

TooltipMarker style configuration.

Please refer to the style configuration ShapeAttrs

showContent
optional boolean default: false

Whether to display the Tooltip content box.

container
optional string|HTMLElement

Custom tooltip container.

containerTpl
optional string

Templates used to specify the legend container must include the classes of each DOM node when customizing the template

itemTpl
optional string

The default template for each record, which must include the classes of each DOM node when customizing the template.

domStyles
optional TooltipDomStyles

The styles for each DOM.

dom-styles
/** Tooltip content box css style */
{
  domStyles: {
    'g2-tooltip'?: CSSProperties;
    'g2-tooltip-title'?: CSSProperties;
    'g2-tooltip-list'?: CSSProperties;
    'g2-tooltip-list-item'?: CSSProperties;
    'g2-tooltip-marker'?: CSSProperties;
    'g2-tooltip-value'?: CSSProperties;
    'g2-tooltip-name'?: CSSProperties;
  }
}
offset
optional number

Tooltip offset.

reversed
optional boolean

是否将 tooltip items 逆序.

showNil
optional boolean

是否显示空值的 tooltip 项

customItems ✨
optional Function

在 tooltip 渲染之前,对最终的 items 进行自定义处理(比如排序、过滤、格式化等)。

{
  tooltip: {
    customItems: (originalItems: TooltipItem[]) => {
      // process originalItems, 
      return originalItems;
    };
  }
}
customContent
optional Function

Support for custom templates. Live demo

{
  tooltip: {
    customContent: (title, data) => {
      return `<div>${title}</div>`;
    };
  }
}