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

问题描述 投票:0回答:3

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

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

html css angularjs
3个回答
0
投票

我建议这个:

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

0
投票

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

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

使用 ngDblClick 切换该变量

ng-dblclick="state = true;"

0
投票

您可以通过向输入元素添加一个指令来实现此行为,该指令将在鼠标悬停时显示工具提示,然后更新您的输入元素以使用工具提示指令。我试图在下面举一个例子。

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;" />

© www.soinside.com 2019 - 2024. All rights reserved.