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