工具提示与表单输入内联

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>

源