如何调整“工具提示”的位置，使其在我的 <label> 旁边？

Question

我正在尝试向我的网站添加一个小功能，用户可以在插入输入之前将鼠标悬停在问号上，问号将显示有关问题的更多信息。这是我到目前为止所做的，但它在自己的单独行上显示小工具提示功能（我知道这是因为标签），但我希望标签和小问号彼此相邻.

<div>

     <label htmlFor="dropdown"> Table Name: </label>

     <div className="help-tip">

      <p> More info about what this is asking for exactly.</p>

     </div>

     <input

     className='input'

     value={this.state.selectedSchema.value}

     onChange={(event) => this.setState({ selectedTableName: 

     event.target.value })

     }>

     </input>

</div>

CSS: 

.help-tip{

  top: 18px;

  text-align: center;

  background-color: #0095d9;

  border-radius: 50%;

  width: 20px;

  height: 20px;

  font-size: 10px;

  line-height: 21px;

  cursor: default;

  margin-left: 320px;

}

.help-tip:before{

  content:'?';

  font-weight: bold;

  color:#fff;

}

.help-tip:hover p{

  display:block;

  transform-origin: 0% 100%;

  -webkit-animation: fadeIn 0.3s ease-in-out;

  animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{    /* The tooltip */

  display: none;

  text-align: left;

  background-color: #0095d9;

  padding: 10px;

  width: 300px;

  border-radius: 3px;

  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

  right: -4px;

  color: #FFF;

  font-size: 10px;

  line-height: 1.4;

}

.help-tip label{

  display:block; 

  width: 300px; 

  height: 300; 

  text-align: left;

  margin-left: 0px;

  margin-right: 300px;

}

.help-tip p:before{ /* The pointer of the tooltip */

  content: '';

  width:0;

  height: 0;

  border:6px solid transparent;

  border-bottom-color:#0095d9;

  right:10px;

  top:-12px;

}

.help-tip p:after{ /* Prevents the tooltip from being hidden */

  width:100%;

  height:40px;

  content:'';

  top:-40px;

  left:0;

}

工具提示 HTML 和 CSS 信用转到：https : //tutorialzine.com/2014/07/css-inline-help-tips