我有一个输入,我正在将长文本绑定到 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);" />
我怎样才能将鼠标悬停在省略号上并显示全文?
我建议这个:
.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;
}
使用 ngStyle 指令切换元素上的 css 规则的值
ng-style="{'text-overflow': state ? 'ellipsis' : 'none' }"
使用 ngDblClick 切换该变量
ng-dblclick="state = true;"
您可以通过向输入元素添加一个指令来实现此行为,该指令将在鼠标悬停时显示工具提示,然后更新您的输入元素以使用工具提示指令。我试图在下面举一个例子。
app.directive('tooltip', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.attr('title', attrs.tooltip);
}
};
});
.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 text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<input maxlength="250" id="input-{{$index}}"
ng-click="setOptionsText(vehicle.optionAdjustment)"
ng-model="vehicle.optionAdjustment"
ng-disabled="disableOptionsField(vehicle)"
class="options options-input long-value-input"
ng-keypress="checkIfEnterKeyWasPressed($event, vehicle, vehicle.optionAdjustment)"
ng-blur="options(vehicle, vehicle.optionAdjustment);"
tooltip="{{vehicle.optionAdjustment}}"
style="width: 128px; height:35px; margin-left:5px;" />