Line chart tooltips broken on Firefox

[CoryChaplin]

A clear and concise description of what the bug is.

Expected results

Hover point on the line, see a tooltip.

Actual results

No visible tooltip on Firefox (but it works on Chrome).

Screenshots

How to reproduce the bug

1. Go to Explore view or a Dashboard with a line chart
2. Hover a point on the line
3. See no tooltip

Environment

(please complete the following information):

• superset version: 0.33.0.rc1
• python version: 3.6
• node.js version: 12.5.0
• npm version: 6.1.0

Checklist

Make sure these boxes are checked before submitting your issue - thank you!

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven't found one similar.

[issue-label-bot]

Issue-Label Bot is automatically applying the label #bug to this issue, with a confidence of 0.99. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[schoel-bis]

I am seeing the same here. This is due to #7102, more precisely the style for the body element in superset/assets/stylesheets/less/index.less.

The position: absolute setting on the body element causes Firefox to calculate the height (and consequently the clientHeight) of the html element as 0 as absolutely positioned elements have no influence on their parent's height. But NVD3 uses document.documentElement.clientHeight (documentElement is the html element) in the formula for calculating the position of the tooltip. Since it is always 0 on Firefox the calculation produces a grossly false result and places the tooltip off-screen.

My understanding of the change from the pull request above is that is meant to ensure that the body will always cover the entire window. A similar effect should be achievable with something like the following while avoiding the problem described above:

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

[etr2460]

@schoel-bis Are you sure this is the issue here? I've been investigating this same issue and am pretty sure the root cause is here: https://github.com/apache-superset/superset-ui-plugins/blob/master/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js#L1081

We're removing all tooltips on the page whenever we rerender a chart, which is problematic especially on dashboards where multiple charts could have tooltips in the DOM. If your fix solves the issue here, than awesome, but I think there's another deeper problem that needs to be solved with the nvd3 chart plugin

[schoel-bis]

Well, frankly I wouldn't bet on this being the one and only problem with tooltips or NVD3 on Firefox or anywhere. Anyway, I wasn't seeing any tooltips whatsoever in Firefox and with that patch applied I have them back.

[CoryChaplin]

@xtinec maybe you can confirm this as a side effect of your commit ?

[graceguo-supercat]

@CoryChaplin This PR caused an issue: the standalone mode chart didn't show anymore. please see #8147 for details. We have reverted this PR from master branch.

[schoel-bis]

So, if the fix has been reverted, this needs to be re-opened, I suppose. I can't find how to do that, though.

Although I do not currently have the time to investigate any further, I'd like to add a few observations:

• Embedded charts work just fine in Firefox with the fix (Fix tooltips not visible for NVD3 charts on Firefox (#7822) #7929). Chrome exhibits the behaviour described in the revert (Revert "Fix tooltips not visible for NVD3 charts on Firefox (#7822)" #8147).
• With the fix, in Chrome, the #chart-container div is missing entirely from the embedded chart, so it looks like something is going badly wrong in the process of creating the chart. No exceptions are ever logged to the console, though.
• With the fix, Chrome does display the chart if you remove the standalone=true query – although this is not what you would want to have displayed when embedding things
• Embedded dashboards are not affected

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. For admin, please label this issue .pinned to prevent stale bot from closing the issue.

[amicis31]

Could you open a more general issue or assign .pinned to this?

[magor]

Hi, we are experiencing the same issue with latest stable release, I understand the fix was reverted?

[saward]

I'm having an issue like this, where hovering mouse over charts with firefox does not display any extra information.

[betodealmeida]

This seems to be working on Firefox now, I couldn't repro.