将鼠标悬停在元素上时,工具提示显示在错误的位置

将鼠标悬停在元素上时,工具提示显示在错误的位置

我有一个工具提示,当我将鼠标悬停在文本框上时,该提示显示在错误的位置,在下面添加了代码,这里有什么想法吗?我也在使用样式组件库。 “ 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;
}
footballfl1987 回答:将鼠标悬停在元素上时,工具提示显示在错误的位置

  

将展示位置更改为所需的顶部/左侧/右侧

  <OverlayTrigger
      key="help"
      placement="top" //change
      overlay={
        <Tooltip id="tooltip-top">
         Tooltip
        </Tooltip>
      }
    >

希望这会对您有所帮助。让我知道您是否有任何问题。

,

答案,需要将边距更改为正文的CSS填充。替换后的对齐方式得到纠正

// this is supposed to resolve and compile nested-entry-point.js
// and return the resulting code as a string
import compiledJsCode from 'nested-entry-point.js';

// ...
eval(compiledJsCode);
// ...
本文链接:https://www.f2er.com/3160818.html

大家都在问