Carbon: DataTable: Tooltip in a sortable header doesn't show on mouseover in Firefox

Created on 16 Aug 2018 · 21Comments · Source: carbon-design-system/carbon

Detailed description

Describe in detail the issue you're having.

In Firefox, a Tooltip in a header that is sortable in the DataTable does not show the tooltip text on mouseover. The issue only appears to exist in Firefox and only when the header is sortable. Here is an example of our headers array:

const myObject = (
  <Tooltip triggerText={t('example')}>
    {t('exampleTooltip')}
  </Tooltip>
);

headers = [
  {
    key: 'myKey',
    header: myObject,
},
// ...
];

Is this a feature request (new component, new icon), a bug, or a general issue?

improvement/bug

Is this issue related to a specific component?

DataTable

What did you expect to happen? What happened instead? What would you like to see changed?

I expected the Tooltip text to show on mouseover for the Tooltip in a DataTable header that is sortable. This issue only occurs in Firefox.

What browser are you working in?

Firefox 61.0.2

What version of the Carbon Design System are you using?

6.20.0

react 2 bug 🐛

Source

emmafull

Most helpful comment

It looks like as of 7 days ago this bug was fixed by Mozilla. https://bugzilla.mozilla.org/show_bug.cgi?id=1089326

I'm on the Firefox Developer Edition build and the tooltip shows up fine for me in the example codesandbox.

vpicone on 7 Mar 2019

🚀1 🎉1

All 21 comments

Hi @emmafull! 👋 Thanks for taking the time to make this issue 😄

Would you mind including a codesandbox link to help us reproduce the issue here? There should be a link with a template in the issue template that you can use!

joshblack on 16 Aug 2018

👍1

Hi @joshblack, here is an example: https://codesandbox.io/s/817oqjp3q2. I have only found this issue in Firefox and it only exists when the header is sortable. I have updated the issue description with those details. Thanks.

emmafull on 17 Aug 2018

Reducing this a little bit further, I think this may be an issue with tooltips in general on FF, right?

joshblack on 21 Aug 2018

As far as I can tell the issue is only with the tooltip in a sortable header in Firefox. Below are two examples of tooltips displaying correctly in Firefox.

Here's a tooltip is a non-sortable header: https://codesandbox.io/s/40llkj5v27
Here's a tooltip alone: https://codesandbox.io/s/9oxqvpq76o

emmafull on 23 Aug 2018

Hi @emmafull! Have you tried setting clickToOpen to true for the tooltip? I think this should help in these situations.

joshblack on 23 Aug 2018

Hi @joshblack thanks for your responses. Setting clickToOpen to true did not appear to fix it. Please see the example: https://codesandbox.io/s/zxrx492ppl

emmafull on 24 Aug 2018

cc @asudoh, do you think something weird is going on with focus for tooltip and the button for the header?

joshblack on 28 Aug 2018

The title says “mouseover” - Did you guys want clickToOpen={false}? Thanks!

asudoh on 28 Aug 2018

@asudoh Mouseover would be nice so it would match the behavior in Chrome and Safari, however, any means of viewing the tooltip text would suffice.

emmafull on 4 Sep 2018

Thanks @emmafull for your response - Given that I see clickToOpen={false} is your way to go. Feel free to reopen if it doesn’t solve your problem!

asudoh on 5 Sep 2018

Hi @asudoh setting clickToOpen={false} doesn't resolve the issue that the Tooltip text doesn't show on mouseover in Firefox. Please see the example here: https://codesandbox.io/s/7m785m7mjj

The issue of the Tooltip text not showing in Firefox is only present when the header is sortable. Here is an example with isSortable={false} where the tooltip text shows correctly on mouseover: https://codesandbox.io/s/n0m50kzm2j

Will you please reopen this issue? I don't see where I'm able to do that. Thanks!

emmafull on 5 Sep 2018

Thanks for reopening @tw15egan.

My coworker had a suggestion to fix the mouseover a while back in this PR, which wasn't a complete fix because it caused a11y issues: https://github.com/IBM/carbon-components-react/pull/900. Mentioning it in case it provides any useful info.

emmafull on 7 Sep 2018

@emmafull I see that we hit https://bugzilla.mozilla.org/show_bug.cgi?id=1084196. More reduced case is:

<!DOCTYPE html>
<html>
  <body>
    <button>
      <div id="thediv">Foo</div>
    </button>
  </body>
  <script type="text/javascript">
    document.getElementById('thediv').addEventListener('mouseover', function (evt) {
      console.log('Event:', evt);
    });
  </script>
</html>

If you run that HTML, you'll see it works in Chrome but not in Firefox. That said, you may want to create an alternate version of <TableHeader> that uses something different from <button> and use that in render prop of the <DataTable>. Thanks!

asudoh on 11 Sep 2018

Thanks, @asudoh. I really appreciate your time and help in tracking down the root cause.

emmafull on 13 Sep 2018

@asudoh are you suggesting we should fix this from application side? Will Carbon (or any contributor) invest time for a fix? maybe don't wrap the TableHeadder with <button> ?

nelsonchen90 on 1 Nov 2018

@nelsonchen90 we definitely try and fix bug reports during out sprints but can't get to all of them. Will gladly accept PRs to fix this in the meantime! 😄

joshblack on 1 Nov 2018

I also meet this issue, if this issue has any progress? or which release should include this issue fix?
and my carbon versions are based on
"carbon-components": "^9.61.1",
"carbon-components-react": "^6.60.1",
"carbon-icons": "^7.0.7",

ffanfeifei on 21 Jan 2019

👍1

It looks like as of 7 days ago this bug was fixed by Mozilla. https://bugzilla.mozilla.org/show_bug.cgi?id=1089326

I'm on the Firefox Developer Edition build and the tooltip shows up fine for me in the example codesandbox.

vpicone on 7 Mar 2019

🚀1 🎉1

Super!! Thank you for telling it to us and trying it out @vpicone!

asudoh on 7 Mar 2019

👍1

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

stale[bot] on 1 May 2019

Hi there! :wave: If you're wondering why this issue was moved, we're currently updating our repo structure so that every package is found in the same project.

This should not have any impact for you, but we wanted to give you a heads up in case you were wondering what is going on. If you have any questions, feel free to reach out to us on Slack or contact us at: [email protected]. Thanks!