Say we are using angular2-multiselect-drop down. What would be the proper way to get different hover over values for different items in the drop down?
In normal html, you have direct access to each element of the drop down list if you are hardcoding it, and you can set the style css for each item.
But how could I do this in an angular drop down?
You can achieve this using following code,
Your CSS will look like below,
/* Tooltip container */
.tooltip {
border: 2px solid #f5f5f5;
margin-left: 10%;
padding:20px;
max-height: 10%;
width: 300px;
position: relative;
display: block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
your HTML be like below,
<h1>See the numbers in tooltip when they change</h1>
<div *ngFor="let i of ['a','b','c','d','e','f']; let j = index;" class="tooltip">
<span>{{i}}</span>
<span class="tooltiptext">new tooltip text every time {{j}}</span>
</div>