tooltip

[TOC]
- ## tooltip
  - ### enabled: Boolean
    用户将鼠标悬停在图表区域上时显示工具提示。
  - ### enabledOnSeries: Array
    仅在多系列图表中的某些系列上显示工具提示。提供您希望显示的那些系列的索引。
  - ### shared: Boolean
    当有多个系列时，显示共享工具提示。
    如果您有 DateTime x 轴和多系列图表，请确保您的所有系列都具有相同的 "x" 值，以便共享工具提示顺利工作。
    例如
```javascript
series: [{
	  name: "series A",
	  data: [{
			x: "2018-09-10",
			y: 120
		}, {
			x: "2018-09-11",
			y: 480
		}, {
			x: "2018-09-12",
			y: 330
		}]
	  }, {
		name: "series B",
		data: [{
			x: "2018-09-10",
			y: 112
		}, {
			x: "2018-09-11",
			y: 321
		}, {
			x: "2018-09-12",
			y: 443
		}]
	  }  
]
```
    请注意，x两个系列中的值相同。如果你想要不规则的时间序列，shared工具提示将不会很好地播放。这是一个打开了共享工具提示的[不规则时间序列](http://example.itshubao.com/example/255.html "不规则时间序列")的示例——但工具提示仅显示其悬停的系列的数据。

- ### followCursor: Boolean
    跟随用户的光标位置而不是将工具提示放在实际数据点上。
  - ### intersect: Boolean
    仅当用户将鼠标悬停在数据点上时才显示工具提示。
  - ### inverseOrder: Boolean
    在多个系列中，当共享工具提示时，反转系列的顺序（以便在堆叠图表中更好地比较）。
  - ### custom: function || Array of functions
    根据函数参数中提供的值绘制自定义 html 工具提示而不是默认工具提示。
	<iframe src="http://example.itshubao.com/inexample/256.html" width="100%" height="420px" frameborder="0" scrolling="no"></iframe>
```javascript
tooltip: {
		custom: function({series, seriesIndex, dataPointIndex, w}) {
			return '<div class="arrow_box">' +
				'<span>' + series[seriesIndex][dataPointIndex] + '</span>' +
				'</div>'
			}
}
```
    > 注意：在多系列/组合图表中，您可以传递一个函数数组来为不同的图表类型自定义工具提示。例如，带有烛台和线条的组合图表将具有不同的工具提示。

- ### fillSeriesColor: Boolean
    启用后，用相应的系列颜色填充工具提示背景
  - ### theme: String
    可用选项

- light
   - dark
   
    如果您还想自定义工具提示的不同背景和前景色，您应该在 CSS 中进行
```javascript
  .apexcharts-tooltip {
    background: #f3f3f3;
    color: orange;
  }
```
  - ### style:
    - #### fontFamily: String
      应用于工具提示文本的字体
    - #### fontSize: String
      应用于工具提示文本的字体大小
  - ### onDatasetHover
    - #### highlightDataSeries: Boolean
      当用户将鼠标悬停在特定系列的数据点上时，其他系列将变灰，使当前系列突出显示。
  - ### x
    - #### show: Boolean
      是否在工具提示上显示工具提示标题（x 轴值）

`tooltip.x.show: true`, 工具提示结果为
     ![](/uploads/images/20221226/b24aee2e656f3867cd1ffd2e8c22dd7f.png)
     `tooltip.x.show: false`, 工具提示结果为
     ![](/uploads/images/20221226/b6d4a277dae5dc7c6adc0f5a37e6d82c.png)
    - #### format: String
      在工具提示上显示的 x 轴值的格式。要查看如何格式化日期时间字符串，请查看[日期时间格式化](http://www.bixiaguangnian.com/manual/apexcharts/241.html "日期时间格式化")程序指南。
    - #### formatter: function
      您可以根据需要覆盖和显示的自定义格式化程序函数（用例可以是使用复杂的 moment.js 函数格式化的日期）
  - ### y: Object or Array
    在多个系列中，该tooltip.y属性可以接受数组以针对不同系列规模的格式化程序。
	<iframe src="http://example.itshubao.com/inexample/257.html" width="100%" height="420px" frameborder="0" scrolling="no"></iframe>
    - #### formatter: function
      要格式化工具提示的 Y 轴值，您可以定义自定义格式化程序函数。默认情况下，这些值将根据 `yaxis.labels.formatter` 函数进行格式化，如果您定义它，该函数将被该函数覆盖。
	  
	  ```javascript
tooltip: {
		y: {
			formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
				return value
			}
		}
}
```
    - #### title
      - ##### formatter: function
        可以使用此功能格式化出现在值旁边的系列名称。默认行为是`(seriesName) => returns seriesName`
  - ### z
    - #### formatter: function
      要格式化气泡系列的 z 值，您可以使用此函数。
    - #### title: String
      Bubble series z 值的自定义文本。
  - ### marker
    - #### show: Boolean
      是否在系列名称前面显示颜色编码的标记形状，这有助于识别多个数据集中的系列。
  - ### items
    - #### display: String
      每个工具提示项容器的 css 属性。
  - ### fixed
    - #### enabled: Boolean
      将工具提示设置到固定位置
    - #### position: String
      当有一个固定的工具提示时，选择一个预定义的位置。
      可用选项：

- topLeft
     - topRight
     - bottomLeft
     - bottomRight
    - #### offsetX: Number
      在固定位置设置工具提示容器的左偏移量
    - #### offsetY: Number
      在固定位置设置工具提示容器的顶部偏移量

```javascript
  tooltip: {
      enabled: true,
      enabledOnSeries: undefined,
      shared: true,
      followCursor: false,
      intersect: false,
      inverseOrder: false,
      custom: undefined,
      fillSeriesColor: false,
      theme: false,
      style: {
        fontSize: '12px',
        fontFamily: undefined
      },
      onDatasetHover: {
          highlightDataSeries: false,
      },
      x: {
          show: true,
          format: 'dd MMM',
          formatter: undefined,
      },
      y: {
          formatter: undefined,
          title: {
              formatter: (seriesName) => seriesName,
          },
      },
      z: {
          formatter: undefined,
          title: 'Size: '
      },
      marker: {
          show: true,
      },
      items: {
         display: flex,
      },
      fixed: {
          enabled: false,
          position: 'topRight',
          offsetX: 0,
          offsetY: 0,
      },
  }
```