Question

我想在warning icon悬停时显示应该有滚动的文本数据，我们可以在悬停框中包含的数据上下滚动...我知道可以做但不能在网上得到任何东西。直到现在我能够显示在控制器部分初始化的数据，但我无法设置滚动并保持文本外观。

https://plnkr.co/edit/IhS8Nn9VCgFgucAHmckW?p=preview

Answer 1

我认为滚动不适用于工具提示，但多行可以这样做：

$scope.hoverData = $scope.hoverData.match(/.{1,10}/g).join("\n")

请参阅Plunker

Answer 2

这不是一个有角度的解决方案，但你可以用一点css产生所需的效果。只需在您的范围中添加一个新类（我使用fa-warning--custom）并在您的css文件中添加一些新的CSS。

如果您想将警告硬编码到css的content属性中，但attr(title)解决方案可以使用手柄数据，至少在Plunker中。< / p>

请注意，标题解决方案和css弹出窗口同时出现。您可以通过将span的{{1}}属性的名称更改为其他内容来解决此问题，例如title，但请务必在data-title中进行相同的更改在css。

因为这都是css，您可以修改和自定义悬停块，但是您可以。

＆＃13;

attr()

＆＃13;

.fa-warning--custom {
  position: relative;
  top: 0;
  left: 0;
}

.fa-warning--custom::after {
  content: attr(title);
  position:absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 150px;
  overflow-y: scroll;
  background-color: white;
  word-wrap: break-word;
  z-index: 3;
  display: none;
  
}

.fa-warning--custom:hover::after {
  display: block;
}

/* the following css is for demonstration, you don't need it */

.fa-warning--custom {
  background-color: lightgray;
}

.tile {
  border: 1px solid blue;
  padding: 0px 3px;
  background: lightgray;
}

＆＃13;

Answer 3

做这样的事情而不是工具提示

 <style>
  #hoveredText {
    position:absolute;
    top:0px;
    max-height:100px;
    overflow: scroll;
    display:none;
  }

  #warningText {
    position: relative;
  }

  #warningText span:hover + #hoveredText {
    display:block;
  }
</style>

HTML代码将是：

<h1>Hello Plunker!</h1>
<span id="warningText"> 
  <span ng-if="true"  class="fa fa-warning" style="font-size:15px;color:red"></span>
  <div id="hoveredText">
    <pre>
      Dummy text
      Dummy text
      Dummy textDummy text

      Dummy text
      Dummy text
      Dummy text
    </pre>
  </div>
</span>

在鼠标悬停时滚动文本数据

3 个答案: