-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
Comments
Workaround Demo: |
WorkaroundThere's also an alternative approach, that lets you preserve the original tooltip's little pointer. It puts the tooltip in a separate |
@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. |
The other workaround works: http://jsfiddle.net/highcharts/7wVDV/202/ |
Thank you, @TorsteinHonsi for the workaround, I will try it. |
@TorsteinHonsi There are some problems with the workaround.
|
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: |
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. |
+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/ |
Hi @MiroLiska |
How about this one? http://jsfiddle.net/BlackLabel/1jp9e4rw/11/ |
@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 Also another comment is - we need to format and style this with |
Hi @jackyliang There was a bug long time ago with Regarding I think what is really needed here is a standalone tooltip, not related to the chart at all. For example, we can use simple |
@pawelfus Hi Pawel. We're on 6.1 right now (just checked). The lack of As you can tell, it has custom styling using 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, |
@pawelfus Hi Pawel, i would also like to know how the chances are that we are getting a native solution here? @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: |
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. |
… moving mouse upwards. See #5784.
…utside the confinement of the chart area. Closes #5784.
We now have a candidate that you can test at http://jsfiddle.net/highcharts/fqx10th9/. I believe the issues above are fixed, namely 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. |
…utside the confinement of the chart area. Closes #5784.
@TorsteinHonsi |
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 |
and it was, so we did that. You could use Highcharts v6.1.1+ to use the feature |
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
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.
The text was updated successfully, but these errors were encountered: