EasyUI Forum
April 18, 2021, 01:35:59 PM *
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 1205 times)
chrwei
Full Member
***
Posts: 199


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: 199


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
chrwei
Full Member
***
Posts: 199


View Profile Email
« Reply #2 on: December 11, 2020, 07:26:07 AM »

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.
Logged
chrwei
Full Member
***
Posts: 199


View Profile Email
« Reply #3 on: March 24, 2021, 11:32:51 AM »

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;
}
Logged
jarry
Administrator
Hero Member
*****
Posts: 1972


View Profile Email
« Reply #4 on: March 24, 2021, 07:35:14 PM »

What is the 'tooltip.scss'? The framework hasn't included it. Please try to remote it and run your application again.
Logged
chrwei
Full Member
***
Posts: 199


View Profile Email
« Reply #5 on: March 25, 2021, 02:53:15 PM »

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?
Logged
jarry
Administrator
Hero Member
*****
Posts: 1972


View Profile Email
« Reply #6 on: March 25, 2021, 07:44:13 PM »

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


View Profile Email
« Reply #7 on: March 26, 2021, 11:12:30 AM »

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?
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!