Multiple tooltips with different trigger type

[dileepyelleti]

What problem does this feature solve?

For my line chart I need to show two types of tooltips. One on hover on exact point(like with trigger item) and another on hovering any other place (like trigger axis). Below issue was raised for same but closed without proper response https://github.com/apache/incubator-echarts/issues/4905

What does the proposed API look like?

tooltip: [{
        trigger: 'axis',
        formatter: axisTooltipFormatter
      },{
        trigger: 'item',
        formatter: itemTooltipFormatter
      }]

Or

{
  tooltip: {
     trigger: 'axis',
     formatter: axisTooltipFormatter
  },
  series[{
     ...
     tooltip: {
        formatter: itemTooltipFormatter // item trigger
    }
  ]

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org .

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[yufeng04]

It is not currently supported.

[Ovilia]

Hi. Multiple-tooltip is a feature we wish to implement in v5.0, which is a long term requirement. You may need to wait for some time before you can use this feature.

[rahulcyadav]

@Ovilia could you answer this question for me https://stackoverflow.com/questions/60001739/formatting-axis-value-in-tooltip-for-trigger-item

[zl7261]

I want to show the item's data when the trigger on bar.stack[i].item, and show total analysis when trigger the part between the bar height to chart height.

Currently, the tooltip.formatter function has 3 parameters,

But I can't identify the trigger is from the axis or item in the tooltip.formatter function.

Obviously, the axis and the item trigger should have different behavior in a series-bar chart.

Does this is not supported in Echarts' latest version?

[anoosurf]

a simple 'split' option to split the tooltip for each individual series.. is very helpful when analyzing multiple line charts

[Darshan-agent]

@anoosurf can you give code snippet how you splits option

[anoosurf]

the above pic is from highcharts .. i was suggesting echarts should have an option like this for easy contextual tooltip

[Darshan-agent]

@anoosurf oh okay my Bad tooltip item trigger won't trigger all the plots :(

[Darshan-agent]

Guys any Idea about below issue

[DavidFucsko]

Why is this closed exactly?

a simple 'split' option to split the tooltip for each individual series.. is very helpful when analyzing multiple line charts

This would be a nice feature

[Joaveinz]

Hi. Multiple-tooltip is a feature we wish to implement in v5.0, which is a long term requirement. You may need to wait for some time before you can use this feature.

Hello @Ovilia, I see the version is now 5.2.2, has this been implemented? Or has the roadmap changed?

[ddx32]

Hi, we're looking for this feature in our team as well. Is there any update on it in v5?

[MarceloDiazz]

hello @Ovilia , do you have any idea if this feature was applied ?

[MarceloDiazz]

I have a problem, this tooltip does not show all the values ​​and they are below the div

[MarceloDiazz]

for some strange reason the style of the tooltip sends top with a negative number and it stays below the div

[MarceloDiazz]

[MarceloDiazz]

If anyone knows how I can edit that div to prevent it from doing that, If anyone knows how I can edit that div to prevent it from doing that, try extraCssText:"top:0 !important" but it doesn't work

[rapomon]

You can try to toggle the trigger between axis/item on mouseover/out over the series, something like this:

https://echarts.apache.org/examples/en/editor.html?c=multiple-y-axis&code=CYQwLiCMAEC80G0C0AWAbAGmkgrABiyUgOgCYBmUrUnTaAdjXq0nNqxVKukrtLxJoUWcuQC6AbgBQoCKTiJukAHR1yy8iI0iszMtSwl1w6CbSSZ4EOQUJl92SFIWpAWwCWAOwAiV-fABZcAALZQ9PAAp7ZUdSAEppVxAAD185BSCwUKTkqIc_BKkpAAcAUwAnAGNSzwgAc1KAJRBPBoUctKdsaHDO0mk3LwA1EAAbAFdSjJCwrzyYq0hCnJGJqcCZnPnHJYHYhViwkGKIiIA3McnuL2BS5Li4AD5oAG8paGhy0rBx8s9oc6XUryABUPRSq0mDwA9ODUn5pABfQqDTyQ4HTLKzSLRWLLCFA_zQTLZFLbAoDAD2xTA7kp_3gbw-YEplNGtOKAC5Xu8PtAwOV3HUGuVuQByFLuADOYt5iIwvLqguA3KZfMFdWCYHFxAApLKPvLeaNSg1PCqeXzoI5uQgxQBVTzuUC3GVYMUABUpVRqEAAVqUxWI5QqPskAILJaW23kfNVWsAATzK4sq4FN3sTYtDVugYyFngAKu5KgBrKXcgWTHNWm2IMUAKRa2egYoAYqUAEYtsVBco98PFfvuoJZ90N8aeHsT0YD8Z1HsAZVKxR7AHlKmAewA5SlnHveUqVIOx6CI3liHOJyPRxCn-N8pMp1sXNbZ08fTwgVylcWO50gK6765tAxSUlK7i0vS4omgAZluNZ8jk3IrECiEfOEKHDEC0AADzQHg0AAPw9NhazQNyBAfnmUZSgAMl4v6WiB0BSsElIAO6VuU1bUR8oyMYuSYmqqfF8pUbLeuKADEOAoPQeAAMJoAaLHniB6l8kaVoPsyyZMWKr6TMBuZfj-4pej6tQgAGJlWmBEFQZ44oalqdlISkKEEms6Gkc5fnonhBHEQFOGUb5kr0Yxoksax7FcfyPGlL5_GCcJTG6bmEmjFJrbSQAnJAimKfQOCqRp1HabmkV0SAnalKMMUsbB3pJGAYAVNygI-dANx3Fg7jxE8zGxRc5SgRU1TWQ00ixR87iwQCZRWfUTQtG0zzEA8mUgctU2rZioTlJSk7AN1kzQGCHR-NAsKoWshRzWe0ANVKUw7bme2-iAbTwOdUxXSkfS3XC6JxMoLJtu4ySlGduxiYaCOfN8vz_F901TI88CESR6MHQA1K2-oUa2YqzWplWnppl68m9gqlBWd46dRZkGf-LoM-5enPmKnYgMO1HXrRACS5p3OF1F1nY-QQJANMgSybIck1IFGaUbateAHWigCatYI4ou3Pcw07AgBti8kwYVVaVVxiz34GZZ-02YGvlPgZAmeK7gs3lKhvi9AkC-VLuJ-PLuaK-y7hciNuZqxr5RtdrXV69aVj-8bsDPI45Bm-nFtiNAhNivqlM2xeUiIgMriJopwT82Ayj0hEYquCdb17hULYvKxFTuAzGeUWeWCwZOm50v8ETFPz35SttvI13XDfKG9YBrjSE8RA-kfK7HzIaiK4qQaUrjlWecqPdAEmeFKbKlMoOV1C3bfjB3ZwVL39NSgRYqFMiAxuFrvXcojdm6t3bqUE6CFXif37n7C2Q95TQFHp4ce9Iloz1cHPZii9gGN1XuvJyW9Tw72jirR8B9OqtkimfTS_9eTX1viaB-lIn7gNfpA8YYBYEMx_n_FEuDl5gJfm_LuWAe50zgYPQOw9kFjychg8os954YSAcvAhG9m7b1ZFHGOmUBRCkPq2Y-p8qYX3Jowu-LC2EiMge_cakjeGQF_kiFEgCl4gKbpEdhHcuHdx4fAo23IYBIJQWgye08lFYJUT0NRniNFEO0UrMhe9EqGKoRKWitDzEMPpEw--j9n4QKgQEwOLjK4JCAA&lang=ts

[LiiKaz]

@rapomon This is a really good alternative. It allows me to configure different item formatters according to the series, and to keep the default tooltip for axis (just adding { replaceMerge: 'tooltip' } in mouseout setOption).

Thanks !