Question

我正在尝试添加一个简单的工具提示，位于我的表单输入的右侧，但我不能阻止它落在下面。我试过了内联块，但似乎没有解决它。

<div class="form-group row">
  <label class="control-label col-sm-2">Size</label>
  <div class="col-sm-7">
    <input id="" style="display: inline;" type="text" class="form-control item-field" placeholder="Add max size here" name="size" required>
    <a href="#" data-tooltip="This is the absolute maximum size of your item. Don't worry about different configurations here.">?</a>
  </div>
</div>

任何帮助都非常感激。

Answer 1

使用css显示工具提示是一种简单的方法

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 170px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

<div class="form-group row">
  <label class="control-label col-sm-2">Size</label>
  <div class="col-sm-7">
    <input id="" style="display: inline;" type="text" class="form-control item-field" placeholder="Add max size here" name="size" required>
    <a href="#" class="tooltip">
    ?
     <span class="tooltiptext">"This is the absolute maximum size of your item. Don't worry about different configurations here."</span>
    </a>
   
  </div>
</div>

Source

工具提示内联表单输入

1 个答案: