EasyUI Forum
December 03, 2020, 09:01:03 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Tooltip issue  (Read 386 times)
chrwei
Full Member
***
Posts: 186


View Profile Email
« on: September 29, 2020, 11:07:24 AM »

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;
Logged
chrwei
Full Member
***
Posts: 186


View Profile Email
« Reply #1 on: September 29, 2020, 11:27:21 AM »

Might be related, <SideMenu collapsed={true}> is also not poping the menu out in dev but is once built.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!