Scroll the text data on mouse hover

Question

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

you mean scroll the title? – לבני מלכה Apr 17 '18 at 12:26 — לבני מלכה, Apr 17 '18 at 12:26
yeah you can say that...pls checkout the plunker – Prabhat Mishra Apr 17 '18 at 12:28 — Prabhat Mishra, Apr 17 '18 at 12:28

score 1 · Answer 1 · answered Apr 17 '18 at 12:33

1

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

answered Apr 17 '18 at 12:33

raul.vila

1,984
1
11
24

wassona · Accepted Answer · 2018-04-17T13:54:15.323

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.

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.

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.

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

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

it's working but i am placing this icon on a `tile` and `tiles` are generated using `ng-repeat` so the hover is getting overridden by the next tile is there any solution for this? — Prabhat Mishra, Apr 17 '18 at 13:13
I only have a bit of experience with Angular, and so I'm not sure how to deal with that. Are you able to put an expanded example that uses tiling on Plunker? — wassona, Apr 17 '18 at 13:26
I think this is the issue : https://stackoverflow.com/questions/7508145/why-does-the-hover-pseudo-class-override-the-active-pseudo-class — Prabhat Mishra, Apr 17 '18 at 13:33
Oh, by overridden do you mean that the hover element is actually below the adjacent tile? If that's the case, then I think adding `z-index: 3;` (3 is somewhat arbitrary, any number above 1 should work) to `.fa-warning--custom::after` should work. I'll update my snippet to demonstrate. — wassona, Apr 17 '18 at 13:46
I'm not sure that it's a stacking context issue, but if it is, then it's difficult to solve without knowing the full stack of elements and their `position`s and z-indices. You might try `.:hover { z-index: 15;}` — wassona, Apr 17 '18 at 13:56
When you say overriden: does the hover element appear, but below the next tile? Does nothing appear? Does the hover element of another tile appear? Does something else happen? — wassona, Apr 17 '18 at 13:59
hover element appear, but below the next tile?...yes this is the case.. — Prabhat Mishra, Apr 17 '18 at 14:09

score 0 · Answer 3 · answered Apr 17 '18 at 12:40

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 :

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

Scroll the text data on mouse hover

3 Answers3