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

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

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

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

Answer 3

这不是 angular 解决方案，但您可以通过一点 css 产生预期的效果。只需将新的 class 添加到您的跨度（我使用 fa-warning--custom）并在您的 css 文件中添加一些新的 css。

如果你想 hard-code 警告到 css 的 content 属性中，你可以，但是 attr(title) 解决方案确实适用于车把数据，在在 Plunker 中最少。

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

因为这就是全部 css，您可以根据需要修改和自定义悬停块。

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

<span class="tile"><span ng-if=true  class="fa fa-warning fa-warning--custom" style="font-size:15px;color:red" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">!</span></span>
<span class="tile"><span ng-if=true  class="fa fa-warning fa-warning--custom" style="font-size:15px;color:red" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">!</span></span>

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

Scroll the text data on mouse hover

html

javascript

css

mousehover

angularjs