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

Posted 2023-03-06

【中文标题】鼠标悬停时在工具提示中显示全文

【英文标题】：Show full text in tooltip on mouseover

【发布时间】：2018-06-02 01:49:07

【问题描述】：

我有一个输入，我将长文本绑定到来自 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);" />

如何将鼠标悬停在省略号上并显示全文？

【参考方案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;

【讨论】：

我添加了 background-color: red 和鼠标悬停它变成了红色（只是为了测试）但没有文字

这可能不起作用，因为我正在使用 Angular？

我从不使用 AngularJS，我使用的是 Angular 2+（这是不同的），但我认为问题不是来自 Angular...你能制作一个屏幕或从其他人那里选择一个图像吗网站向我展示你真正想要的东西：）

我认为问题来自输入，我已经用

【参考方案2】：

使用ngStyle 指令来切换元素上css规则的值

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

使用ngDblClick 切换该变量

ng-dblclick="state = true;"