Highcharts: Tooltip is overflowed by another DOM element

_Workaround_
Use custom html <div> and apply CSS styles.

Demo:

• http://jsfiddle.net/7wVDV/147/

Workaround

There's also an alternative approach, that lets you preserve the original tooltip's little pointer. It puts the tooltip in a separate svg box: http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/.

@sebastianbochan thank you, these seems o be a nice approach, but it does not solve my problem, because as I said I have my chart wrapped in a div with overflow:scroll.
Check this fiddle out for a problem http://jsfiddle.net/7wVDV/201/

The other workaround works: http://jsfiddle.net/highcharts/7wVDV/202/

Thank you, @TorsteinHonsi for the workaround, I will try it.
Is the option 'appendToBody' smth you are looking forward to implement in the future release?

@TorsteinHonsi There are some problems with the workaround.

1. Scrollbar is appearing on the body if the tooltip is created on an edge of screen. http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ (set demo window width to 2 charts width and hover first point from right)

2. In IE11 setSize (JS line 86) is not creating a smaller view box. For example this demo shows cut tooltip in Chrome and a normal tooltip in IE11. http://jsfiddle.net/Lguddypf/

3. When displaying in a table and you need to scroll to see a chart, then tooltip position is wrong: http://jsfiddle.net/Lguddypf/1/ (scroll site to the chart and hover over a point to see that tooltip position is moved to the left.

Please open http://jsfiddle.net/1jp9e4rw/3/show/ on iPad or on Chrome . The anchors for tooltips appearing below the data point are not displayed:

This is issue with tooltip-outside-box study. With standard implementation, the tooltips are fine.

Workaround for the issue above: http://jsfiddle.net/1jp9e4rw/9/

@pawelfus We've actually tried similar work around (H.wrap()) in our code, but it turns out that the workaround is never resolving the problem perfectly, for example in our case, it could have some performance, and accessibility issue, and even on Safari browser, the tooltip position is not calculated the same as Chrome browser. Therefore instead of trying to resolve the bug using the wrap on the consumer side, it would be very nice for highcharts to fix this issue in the native code.

I see this bug has been filed more than one year. Is there any timeline or plan to fix this bug?

I would like a native fix for this bug as well.
Copying the jQuery script doesn't seem to work just right, some instances makes it even worse.

+1 for native fix as well instead of relying on a plugin-based solution. We're running in this issue in our application as well.

Here's the workaround suggested by Paweł, but without jQuery (and same calculations for getting window and document sizes are used) - http://jsfiddle.net/BlackLabel/1jp9e4rw/10/

Not a very good workaround :(

Hi @MiroLiska
Guessing from scrollbars style and JSFiddle logo error - it's IE11.
In that browser Paweł's demo looks the same - I only removed jQuery dependency, nothing was improved in the code / logic.
BTW: it's caused by scrolling

How about this one? http://jsfiddle.net/BlackLabel/1jp9e4rw/11/
Animation disabled to avoid scroll bar jump, but you could wrap animation of tooltip to make sure that is animates only over available space or won't trigger any scrollbar action.

@KacperMadej thank you so much for that! We are running into a similar issue in our app where we need tooltips to overlap over other DOM elements. Your new solution is a lot better. However, one little criticism is that if you have line charts with multiple series, if you hover over the tooltip to get to another series, there's a slight delay where nothing happens and the experience isn't great.

I think the issue here is that the mouseOver event isn't fired if it's hovering over a tooltip. But that's just an assumption

Also another comment is - we need to format and style this with useHTML. From my knowledge, if you use this plugin, you cannot use useHTML and apply custom formatting, is that right?

Hi @jackyliang

There was a bug long time ago with mouseOver and hovering tooltip (around Highcharts v4.0) - this should not be a problem since we use kd-tree for searching closest points. Maybe it's a regression? Could you recreate issue in jsFiddle and share it? Thanks!

Regarding useHTML - yes, that's a limitation.

I think what is really needed here is a standalone tooltip, not related to the chart at all. For example, we can use simple <div> which will be updated on mouseover and hidden on mouseout, demo: http://jsfiddle.net/BlackLabel/xctq42n8/1/ - now we can write anything inside the tooltip, the only thing that requires improvement is positioning (demo uses only point's position in relation to the chart, missing is chart position in the document).

@pawelfus Hi Pawel. We're on 6.1 right now (just checked). The lack of useHTML is kind of a big issue even if we could allow it to overflow other DOM elements. Our team is about 95% done migrating our old d3 charts to Highcharts (which mind you has been a pleasurable experience :D), but traditionally our tooltips overflow other dom elements since each chart resides in its own element. So with Highcharts right now, this is what it looks like:

As you can tell, it has custom styling using useHTML to match our old tooltips 100%.

Are there any chances there may be a native solution by Highcharts to support this overflow behavior without writing a lot of custom code?

Hi @jackyliang,
At this moment the solution is available only as workarounds.

@pawelfus Hi Pawel, i would also like to know how the chances are that we are getting a native solution here?
We chose Highcharts because we did not want to implement workarounds for stuff like that, and it seems that many people run into this problem.
Since all workarounds mentioned here seem to have some downsides, getting a clean native solution for this, seems like the right step for me.

@sebastianbochan That's why we want to know how the chances are that we are getting a native solution. I think for such a great library it's unacceptable to have such a huge downside.

@jackyliang @robinv Thanks for the kind words! :)

@jackyliang @robinv - given the popularity of the issue we will need to resolve this issue. I can not set any ETA at this moment.

Internal note:
Solution could be to separate Tooltip class from Chart class, and render in independent element (main body?). The problem here may be decoupling Tooltip and Chart/Pointer classes (it's tricky as I tried in advanced-stock demo) + we may break exporting tooltip to images (via tooltip.refresh()). Still, it would be good to implement this for v7: we could use initiate Tooltip instance for stock-tools buttons/menu-items and use it as we wish. @TorsteinHonsi

I am very much in favor with what @robinv said because this is also one of the primary reasons why we switched to Highcharts - we wanted to avoid writing too much custom code. Our old d3 charts had a lot of custom extensions/enhancements and it became a mess and nightmare to make changes after awhile. I'm not saying we don't want to customize HC to our likings (customization != extensions), mostly specifically talking about extensions; doing things that default HC doesn't support yet.

Our plan is to roll our HC integration to customers within 2-3 weeks, and we know that customers will complain if tooltips don't appear over other dom elements. If the minimum we get is an ETA on when this could be done, that would satisfy me for now, since then we can establish whether we try to write a custom solution (for now) or wait for a native solution by Highcharts.

@sebastianbochan I wanted to note that the workaround isn't really a solution since the positioning aspect is a little wonky

I would be very happy to see an ETA for a native implementation or a plugin that emulates the behavior (without the positioning/hover wonkiness, and allows using custom HTML) of the current tooltip with DOM overlap

Thanks @pawelfus and @jackyliang.

Pawel, as Jacky mentioned we're launching Highcharts to our customers in the next 2-3 weeks and this is one of the major blockers to our implementation. Given this is a bug not a feature, is this something we can plan to be addressed in the next 2-3 weeks?

Hi @pawelfus I wanted to follow up on this to see if there was any more clarity on this/when we can expect to know? This is critical to our planning process right now so we are awaiting more info. Thanks!

Hi @wynnandrewj, we will update this thread once ETA will be decided. We have plans to release v6.1.1 in the next 2-3 weeks, but I can not promise fix for this issue to be included.

Hi @pawelfus, just wanted to follow up with you and your team regarding this issue. We are very close to launch of Highcharts for customers (think 2-3 weeks max for the first batch of customers), and this is definitely a blocker. I totally understand it's hard to give an exact date so I won't ask for that. But any information whether this will be tackled, and maybe approximate timeline, would be appreciated.

Basically anything we can understand internally + communicate with customers will be awesome.

Thanks!

Thanks for your patience @jackyliang, I'll be working on this code today and try to get an overview over the remaining issues.

We now have a candidate that you can test at http://jsfiddle.net/highcharts/fqx10th9/.

I believe the issues above are fixed, namely useHTML, blinking when moving the cursor up, and scrollbars appearing on narrow pages.

Please test this candidate. If successful, we will make it part of this weeks release, Highcharts v6.1.1.

@TorsteinHonsi thank you so much! Can't wait to play with this.

@TorsteinHonsi
I tested it too, works in all scenarios.

This worked super perfect for us and adding it back in only took like 30 minutes. Thank you SO much for implementing this so quickly and perfectly!

@TorsteinHonsi your fiddle no longer works because https://github.highcharts.com/feature/5784-tooltip-outside-box/highcharts.js doesn't exist. i guess the branch has been deleted

@BernardoFBBraga

If successful, we will make it part of this weeks release, Highcharts v6.1.1.

and it was, so we did that. You could use Highcharts v6.1.1+ to use the feature
API reference: https://api.highcharts.com/highstock/tooltip.outside
Demo: http://jsfiddle.net/BlackLabel/c70h1akL/1/