如何调整“工具提示”的位置，使其位于我的 <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

Answer 1

检查一下，我使用容器在标签上使用弹性框，而 ?元素我也改变了？元素，所以它离你的标签只有 5 px。我最后更改的是 p 元素上的 z-index，因此它将位于输入元素的前面（这需要相对于工作的位置）。

只显示修改后的代码。

html:

<div class="input-label-container">
 <label htmlFor="dropdown"> Table Name: </label>
 <div class="help-tip">
    <p>More info about what this is asking for exactly.</p> 
 </div>
</div>
<input/>

css：

.input-label-container {
  display: flex;    <-
}

.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: 5px;  <-
}

.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;
  position: relative;  <-
  z-index: 999;        <-
}

Answer 2

希望对你有帮助

<div>
      <div className="full-width">
        <div className="float-left">
        <label htmlFor="dropdown"> Table Name: </label>
        </div>

        <div className="help-tip">
          <p> More info about what this is asking for exactly.</p>
        </div>
      </div>
      <input
            className="input"
            value="Testing"
            onChange={event =>
              this.setState({ selectedTableName: event.target.value })
            }
          />

    </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: 100px;
}

.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: 0px;
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
  top: -5px;
  left: 140px;
  position: absolute;
}
.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;
}

.full-width {
  width: 100%;
}

.float-left {
  max-width: 50%;
  float: left;
}