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

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

[vpicone]

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.

[asudoh]

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