如何在下拉列表中获得每个项目的不同悬停值

Question

假设我们使用angular2多选下拉菜单。在下拉列表中获得不同项目的不同悬停值的正确方法是什么？

在普通html中，如果对下拉列表的每个元素进行硬编码，则可以直接访问该元素，并且可以为每个项目设置样式css。

但我怎么能在有角度的下降中做到这一点呢？

Answer 1

您可以使用以下代码实现这一点，

你的CSS如下，

/* 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;
}

你的HTML如下，

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