tooltip(Object)

Tooltip component.

for (var i = 1; i < 10; i++) { var now = new Date(base += oneDay); var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join(‘-’);

valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
valueBase <= 0 && (valueBase = Math.random() * 300);
data.push([dayStr, valueBase]);

valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
data2.push([dayStr, valueBase2]);

}

const option = { legend: { top: ‘bottom’, data: [‘意向’] }, tooltip: { triggerOn: ‘none’, alwaysShowContent: true, position: function (pt) { return [pt[0], 130]; } }, xAxis: { type: ‘time’, // boundaryGap: [0, 0], axisPointer: { value: ‘2016-10-7’, snap: true, label: { show: true, formatter: function (params) { return echarts.format.formatTime(‘yyyy-MM-dd’, params.value); } }, handle: { show: true } }, splitLine: { show: false } }, yAxis: { type: ‘value’, axisTick: { inside: true }, splitLine: { show: false }, axisLabel: { inside: true }, z: 10 }, grid: { top: 110, left: 15, right: 15, height: 160 }, series: [ { name: ‘模拟数据’, type: ‘line’, smooth: true, symbol: ‘circle’, symbolSize: 5, sampling: ‘average’, itemStyle: { color: ‘#8ec6ad’ }, stack: ‘a’, areaStyle: { }, data: data }, { name: ‘模拟数据’, type: ‘line’, smooth: true, stack: ‘a’, symbol: ‘circle’, symbolSize: 5, sampling: ‘average’, itemStyle: { color: ‘#d68262’ }, areaStyle: { }, data: data2 }

};

showContent(boolean) = true

Whether to show the tooltip floating layer, whose default value is true. It should be configurated to be false, if you only need tooltip to trigger the event or show the axisPointer without content.

alwaysShowContent(boolean) = false

Whether to show tooltip content all the time. By default, it will be hidden after some time. It can be set to be true to preserve displaying.

This attribute is newly added to ECharts 3.0.

triggerOn(string) = ‘mousemove|click’

Conditions to trigger tooltip. Options:

'mousemove'
Trigger when mouse moves.
'click'
Trigger when mouse clicks.
'mousemove|click'
Trigger when mouse clicks and moves.
'none'
Do not triggered by 'mousemove' and 'click'. Tooltip can be triggered and hidden manually by calling action.tooltip.showTip and action.tooltip.hideTip. It can also be triggered by axisPointer.handle in this case.

This attribute is new to ECharts 3.0.

showDelay(number) = 0

Delay time for showing tooltip, in ms. No delay by default, and it is not recommended to set. Only valid when triggerOn is set to be 'mousemove'.

hideDelay(number) = 100

Delay time for hiding tooltip, in ms. It will be invalid when alwaysShowContent is true.

enterable(boolean) = false

Whether the mouse can enter the tooltip floating layer. Defaults to false. Set to true to support interactions with links, buttons and other elements inside the tooltip.

renderMode(string) = ‘html’

Render mode for tooltip. By default, it is set to be 'html' so that extra DOM element is used for tooltip. It can also set to be 'richText' so that the tooltip will be rendered inside Canvas. This is very useful for environments that don't have DOM, such as Wechat applications.

confine(boolean) = false

Whether confine tooltip content in the view rect of chart instance.

Useful when tooltip is cut because of 'overflow: hidden' set on outer dom of chart instance, or because of narrow screen on mobile.

appendToBody(boolean) = false

(DEPRECATED since v5.5.0, use appendTo instead.)

Whether to append the tooltip DOM element as a child of the <body> of the HTML page, when using renderMode 'html'.

The default value is false, which means that the tooltip DOM element will be one of a descendant of its echarts DOM container. But that means that the tooltip might be cut when overflow the container if some of the ancestors DOM element of the echarts container are styled with overflow: hidden. This case could also be resolved by setting tooltip.confine, but it might not suitable for all scenarios.

Here we provide appendToBody: true to auto append the tooltip element to <body>, which is a common way to resolve this kind of issue. But true is not set as a default value because to void to bring break change for some cases where tooltip is deeply customized and to void some unexpected bad cases.

Note that it also works when CSS transform used.

appendTo(string|HTMLElement|Function)

Which DOM element to append the tooltip to. Only available when using renderMode 'html'.

The default value is null, which means that the tooltip‘s DOM node will be added as a descendant node of the chart’s DOM container. However, this approach can cause the tooltip to be truncated if it extends beyond the container, due to ancestors of the chart’s DOM container having overflow: hidden set. This issue can be partially addressed using tooltip.confine, but it may not cover all scenarios.

For such scenarios, appendTo can be specified. When it is a function, the interface is in the form of

(chartContainer: HTMLElement) => HTMLElement | undefined | null

which means it returns the node that the tooltip's DOM node should be added to. Returning undefined or null indicates that the default logic described above should be used. Returning an HTMLElement means that it should be added under that node.

Note that it also works when CSS transform used.

className(string)

Specify the classes for the tooltip root DOM. (Only works in html render mode).

Example:

className: 'echarts-tooltip echarts-tooltip-dark'

transitionDuration(number) = 0.4

The transition duration of tooltip's animation, in seconds. When it is set to be 0, it would move closely with the mouse.

displayTransition(boolean) = true

Whether to enable the display transition.

By default, the tooltip uses the opacity fading to make itself invisible rather than setting the DOM element's display property to 'none'. This might cause the scrollbar to be always visible when the tooltip content size is large, even if the tooltip is already invisible. In this scenario, or if you just want no fading, you can set this option to false to disable the display transition.

{{ use: partial-tooltip-common( scope = ‘global’, prefix = ‘#’ ) }}

order(string) = ‘seriesAsc’

Tooltip order for multiple series. Defaults is 'seriesAsc'.

Conditions to order tooltip. Options:

'seriesAsc'
Base on series declaration, ascending order tooltip.
'seriesDesc'
Base on series declaration, descending order tooltip.
'valueAsc'
Base on value, ascending order tooltip, only for numeric value.
'valueDesc'
Base on value, descending order tooltip, only for numeric value.