滚动鼠标悬停的文本数据。

I want to display the text data on hover of the warning icon which should have scroll and we can scroll up and down through the data contained in the hover box ...I know it's possible to do but unable to get anything on web.. Till now i am able to display the data being initialized in the controller part but i am unable to set the scroll and hold the text appearance.

我想显示应该有滚动的警告图标的悬停状态下的文本数据，我们可以在悬停框中上下滚动数据……我知道这是可能的，但我在网上找不到任何东西。到目前为止，我可以在控制器部分显示正在初始化的数据，但是我不能设置滚动并保持文本外观。

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

3 个解决方案

#1

This isn't an angular solution, but you could produce the desired effect with a bit of css. Just add a new class to your span (I used fa-warning--custom) and put some new css in your css file.

这不是一个有棱角的解决方案，但是您可以使用一些css来产生想要的效果。只需在span中添加一个新类(我使用了fa-warning—custom)，并在css文件中添加一些新的css。

If you want to hard-code the warning into the css's content attribute you can, but the attr(title) solution does work with the handlebars data, at least in the Plunker.

如果您想将警告硬编码到css的content属性中，您可以这样做，但是attr(title)解决方案确实可以处理handlebars数据，至少在柱塞器中是这样。

Note that both the title solution and the css popup appear at once. You can fix this by changing the name of the span's title attribute to something else, like data-title, but be sure to make the same change in attr() in the css.

注意标题解决方案和css同时出现。您可以通过将span的title属性的名称更改为其他内容(如data-title)来解决这个问题，但是要确保在css中的attr()中进行相同的更改。

Because this is all css, you can modify and customize the hover block however you'd like.

因为这些都是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>

#2

I think the scrolling does not work with tooltips, but multiline can be done this way:

我认为滚动条不能使用工具提示，但是多行可以这样做:

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

See Plunker

看到一美元

#3

Do something like this instead of tooltip

做一些类似的事情而不是工具提示?

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

  #warningText {
    position: relative;
  }

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

HTML code would be :

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>

#1