html - 在鼠标悬停时在工具提示中显示全文

Question

我有一个输入，我正在将长文本绑定(bind)到 AngularJS。我想显示一个省略号，然后在 mouseover 上，在工具提示中显示全文。

现在它显示省略号，但您必须双击它才能弹出全文。文本位于 ng-repeat 生成的 HTML 表格中。

.long-value-input {
  width: 100px;
  height: 30px;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<input maxlength="250" id="input-{{$index}}" ng-click="setOptionsText(vehicle.optionAdjustment)" ; ng-model="vehicle.optionAdjustment" ng-disabled="disableOptionsField(vehicle)" style="width: 128px; height:35px; margin-left:5px;" class="options options-input long-value-input"
  ng-keypress="checkIfEnterKeyWasPressed($event, vehicle, 
    vehicle.optionAdjustment)" ng-blur="options(vehicle, vehicle.optionAdjustment);" />

我怎样才能将鼠标悬停在省略号上并显示全文？

Answer 1

我建议:

.long-value-input {
    width: 100px;
    height: 30px;
    padding: 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.long-value-input:hover {
    width: auto;
    overflow: visible;
    z-index: 11;
}