Подсказка, отображаемая в неверном месте при наведении на элемент - PullRequest
Новая
       23

Подсказка, отображаемая в неверном месте при наведении на элемент

0 голосов
/ 05 ноября 2019

This is what i see, tooltip way off У меня есть всплывающая подсказка, которая отображается не в том месте, когда я нахожу текстовое поле, добавляю код ниже, есть идеи, что здесь не так? Я также использую библиотеку стилевых компонентов. Тег «FormArea» содержит пользовательские стили. Приложение построено с использованием приложения create create 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;
}

Ответы [ 2 ]

0 голосов
/ 05 ноября 2019

Ответ, необходимый для изменения полей для заполнения css для тела. После замены выравнивание было исправлено 

/*margin-left: 20%;
  margin-right: 20%;
  margin-bottom: 20%;
  margin-top: 10%;*/
  padding-left: 20%;
  padding-right: 20%;
  padding-bottom: 20%;
  padding-top: 10%;
0 голосов
/ 05 ноября 2019

Измените место размещения вверх / влево / вправо, где вы хотите 

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

Надеюсь, это поможет вам. Дайте мне знать, если у вас возникнут проблемы.

...