我正在使用引导程序4,并且尝试过对工具提示进行样式设置。
CSS
tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
HTML
<label class="d-flex flex-column col-md-6" style="text-align: left" for="DoubleSided">Does this design need to be double sided?</label>
<div class="input-group mb-3 col-md-6">
<select required class="form-control" aria-describedby="basic-addon3" name="Double Sided" id="DoubleSided">
<option value="" selected disabled>Please select</option>
<option>Yes</option>
<option>No</option>
</select>
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">
<a class='tooltip' data-toggle="tooltip" data-placement="left" title="Tooltip here">
<i class="fa fa-info-circle" data-toggle="tooltip" aria-hidden="true">
</i></a>
</span>
</div>
</div>