我有一个工具提示,当我将鼠标悬停在文本框上时,该提示显示在错误的位置,在下面添加了代码,这里有什么想法吗?我也在使用样式组件库。 “ FormArea”标签包含自定义样式。使用react create app https://github.com/facebook/create-react-app
构建应用程序如果您需要其他信息,请告诉我。
output =
<React.Fragment>
<FormArea>
<Container>
<Row>
<Column xs={3} xl={3} md={3} sm={3} lg={3} classname="leftAndRightColumns"/>
<Column xs={6} xl={6} md={6} sm={6} lg={6} classname="centreColumn">
<Form onSubmit={this.handleFormSubmit}>
<Form.Group>
<Form.Label>Name:</Form.Label>
<OverlayTrigger key="help" placement="help" overlay={<Tooltip>Tooltip</Tooltip>}>
<Form.Control type="text" placeholder="Name" onChange={this.handleJobChange} value={this.state.jobName}/>
</OverlayTrigger>
</Form.Group>
<Button variant="primary" type="submit">Submit</Button>
</Form>
</Column>
<Column xs={3} xl={3} md={3} sm={3} lg={3} classname="leftAndRightColumns"/>
</Row>
</Container>
</FormArea>
</React.Fragment>
const FormStyle = styles.div`
.centreColumn{
background-color: #ffffff;
position: relative;
padding-top: 5%;
padding-bottom: 5%;
margin-top: 0; margin-right: -10; margin-bottom: 0; margin-left: -10;
border-style: outset;
border-width: 5px;
border-color: #000066;
}
.leftAndRightColumns{
background-color: #0000ff;
position: relative;
padding-top: 5%;
padding-bottom: 5%;
top: 0; right: -10; bottom: 0; left: -10;
}
`;
export const FormArea = (props) => (
<FormStyle>
{props.children}
</FormStyle>
)
body {
background-color: #0000ff;
position: relative;
/*top: 0; right: 0; bottom: 0; left: 0;*/
margin-left: 20%;
margin-right: 20%;
margin-bottom: 20%;
margin-top: 10%;
text-align: center;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}