鼠标悬停时显示完整的工具提示文本

Question

我有一个输入框，我从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);" />

如何通过鼠标悬停省略号来显示完整文本？

- user7367398

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

- user9099485

---

我添加了背景颜色:red，当鼠标悬停时它变成了红色（仅用于测试），但没有文本。 - user7367398

这可能行不通，因为我正在使用Angular？ - user7367398

我从不使用AngularJS，而是使用Angular 2+（这是不同的），但我不认为问题来自于Angular...你能否制作一个屏幕截图或从其他网站选择一张图片来展示您真正想要的内容？ :) - user9099485

我认为问题出在输入上，我已经使用 <p> 或 <span> 但从未用过 input。 - user9099485

Answer 2

使用ngStyle指令在元素上切换CSS规则的值。

ng-style="{'text-overflow': state ? 'ellipsis' : 'none' }"

使用ngDblClick来切换该变量。

ng-dblclick="state = true;"

- svarog