如何調整&#39;ToolTip&#39;的位置讓它緊挨着我<label>？</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

希望這可以幫助

<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;
}

Answer 2

檢查一下，我用一個容器在標簽上使用柔性盒和？ 元素也改變了左邊緣？ 元素因此距離您的標簽僅5 px。 我改變的最后一件事是p元素上的z-index，因此它將位於input元素的前面（這需要一個相對於work的位置）。

僅顯示更改的代碼。

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;        <-
}