New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip is overflowed by another DOM element #5784

Closed
nitoloz opened this Issue Oct 5, 2016 · 31 comments

Comments

Projects
None yet
@nitoloz

nitoloz commented Oct 5, 2016

Expected behaviour

Tootip is not overflowed by any other DOM elements

Actual behaviour

My chart can have quite a big height, therefore I have wrapped it into a div with a fixed height and overflow-y:scroll, so only a part of the whole chart container might be visible.
When I am trying to see a tooltip on the edge of chart container tooltip might be hidden under the div hosting the chart.

Live demo with steps to reproduce

overflow

Affected browser(s)

any browser.

Possible solution

Is it probably possible to add a appendToBody option for a tooltip, so that it will be append not to chart container, but to body element and thus will not be overflowed by any container hosting the chart.

@sebastianbochan

This comment has been minimized.

Contributor

sebastianbochan commented Oct 5, 2016

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

Demo:

@TorsteinHonsi

This comment has been minimized.

Collaborator

TorsteinHonsi commented Oct 6, 2016

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/.

@nitoloz

This comment has been minimized.

nitoloz commented Oct 6, 2016

@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/

@TorsteinHonsi

This comment has been minimized.

Collaborator

TorsteinHonsi commented Oct 7, 2016

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

@nitoloz

This comment has been minimized.

nitoloz commented Oct 11, 2016

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?

@KacperMadej

This comment has been minimized.

Contributor

KacperMadej commented Jun 12, 2017

@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.

@MiroLiska

This comment has been minimized.

MiroLiska commented Jun 15, 2017

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:
ipadproblem
This is issue with tooltip-outside-box study. With standard implementation, the tooltips are fine.

@pawelfus

This comment has been minimized.

Contributor

pawelfus commented Nov 20, 2017

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

@SummerLi

This comment has been minimized.

SummerLi commented Dec 12, 2017

@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?

@mrbormeth

This comment has been minimized.

mrbormeth commented Jan 5, 2018

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.

@jackyliang

This comment has been minimized.

jackyliang commented May 24, 2018

+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.

@KacperMadej

This comment has been minimized.

Contributor

KacperMadej commented May 24, 2018

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/

@MiroLiska

This comment has been minimized.

MiroLiska commented May 24, 2018

ttwrongposition
Not a very good workaround :(

@KacperMadej

This comment has been minimized.

Contributor

KacperMadej commented May 24, 2018

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

@KacperMadej

This comment has been minimized.

Contributor

KacperMadej commented May 24, 2018

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.

@jackyliang

This comment has been minimized.

jackyliang commented Jun 7, 2018

@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

jun-07-2018 15-43-29

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?

@pawelfus

This comment has been minimized.

Contributor

pawelfus commented Jun 8, 2018

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).

@jackyliang

This comment has been minimized.

jackyliang commented Jun 11, 2018

@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:

40354732-74d37ce2-5dac-11e8-8b03-cc585af6ada6 1

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?

@sebastianbochan

This comment has been minimized.

Contributor

sebastianbochan commented Jun 12, 2018

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

@robinv

This comment has been minimized.

robinv commented Jun 12, 2018

@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.

@pawelfus

This comment has been minimized.

Contributor

pawelfus commented Jun 12, 2018

@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

@jackyliang

This comment has been minimized.

jackyliang commented Jun 12, 2018

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

@wynnandrewj

This comment has been minimized.

wynnandrewj commented Jun 12, 2018

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?

@wynnandrewj

This comment has been minimized.

wynnandrewj commented Jun 14, 2018

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!

@pawelfus

This comment has been minimized.

Contributor

pawelfus commented Jun 15, 2018

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.

@jackyliang

This comment has been minimized.

jackyliang commented Jun 25, 2018

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!

@TorsteinHonsi

This comment has been minimized.

Collaborator

TorsteinHonsi commented Jun 26, 2018

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

@TorsteinHonsi

This comment has been minimized.

Collaborator

TorsteinHonsi commented Jun 26, 2018

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.

@jackyliang

This comment has been minimized.

jackyliang commented Jun 26, 2018

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

TorsteinHonsi added a commit that referenced this issue Jun 27, 2018

Added new option, `tooltip.outside`, to allow the tooltip to render o…
…utside the confinement of the chart area. Closes #5784.
@sebastianbochan

This comment has been minimized.

Contributor

sebastianbochan commented Jun 27, 2018

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

@jackyliang

This comment has been minimized.

jackyliang commented Jun 29, 2018

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment