Tooltip issue

[chrwei]

I made a simple test that works just fine, code is below.  Using the same pattern this has been working for months.  recently it has stopped working in development (create-react-app's "react-scripts start"), but works fine after "react-scripts build".  it's the same in Firefox, Chrome, and Edge-Legacy.  I can open the devtools and I see the div created in the DOM on hover, and keyboard navigating to the node does cause the browser to highlight where it should be.  Editing the style to change the z-order has no effect, even with 10x changes.  Editing display and position does cause the text to display below all other elements or affect the page layout.

What might cause the code below to work in one project in dev but not another?  I'm concerned the issue will spread to the build at some point.

Code:

import React from 'react';
import './App.css';
import { Form, FormField, TextBox, Tooltip } from 'rc-easyui';

function App() {
    const model ={foo:""};
    return (
        <Form
            model={model}
        >
            <FormField name="foo" style={{ ...{ marginBottom: "5px", marginRight: "10px" } }}
                label="Field"
            >
                <Tooltip tooltipCls="form-field-focused" tooltipStyle={{maxWidth:"300px"}} position="top" content="This is a tooltip"><i style={{ fontSize: "14px" }} >??</i></Tooltip>
                <TextBox />
            </FormField>
            <FormField name="bar" style={{ ...{ marginBottom: "5px", marginRight: "10px" } }}
                label="another Field"
            >
                <Tooltip tooltipCls="form-field-focused" tooltipStyle={{maxWidth:"300px"}} position="top" content="This is a tooltip"><i style={{ fontSize: "14px" }} >??</i></Tooltip>
                <TextBox />
            </FormField>
        </Form>
    );
}
export default App;

[chrwei]

Might be related, <SideMenu collapsed={true}> is also not poping the menu out in dev but is once built.

[chrwei]

Still an issue, only happens in create-react-app's "npm react-scripts start", it's fine when deployed.  this is making testing very tedious.

[chrwei]

I found the cause, I don't know how to fix it correctly.

Attached a screen shot comparing the rendered styles of a build vs a start.  you can see the order the styles is applied is different causing the opacity to override differently.

My current workaround for the tooltip is to add this to my index.css

Code:

.tooltip {
  opacity: 1;
}

[jarry]

What is the 'tooltip.scss'? The framework hasn't included it. Please try to remote it and run your application again.

[chrwei]

it's not anything I made, I assumed webpack generates it from your css. 

due to the nature of the tooltips I can't click around to find out what it is, moving the mouse removes it from the DOM.  any tips on tracking it down?

[jarry]

The 'opacity: 0;' does not exist in tooltip css definition. So it may be other packages that are included in 'package.json', check this file to find out the issue may be.

Set the 'hideEvent' to empty to prevent from hiding the tooltip and you can debug to see what happens.

Code:

<Tooltip hideEvent="" tooltipCls="form-field-focused" tooltipStyle={{ maxWidth: "300px" }} position="top" content="This is a tooltip"><i style={{ fontSize: "14px" }} >??</i></Tooltip>

[chrwei]

it's from the bootstrap 4.0.0 cdn, shown via sourcemap, so I'm not 100% sure where it actually comes from.  bootstrap.min.css is imported via the react-chatbox-component package. 

Is there a way I can control the order things are imported and evaluated without ejecting and doing it manually?  Or is my work-around my most maintainable option?