Digamos que estamos usando angular2-multiselect-drop down. ¿Cuál sería la forma correcta de obtener diferentes valores de desplazamiento para diferentes elementos en el menú desplegable?
En html normal, tiene acceso directo a cada elemento de la lista desplegable si lo está codificando, y puede configurar el estilo css para cada elemento.
Pero, ¿cómo podría hacer esto en un menú desplegable angular?
Puedes lograr esto usando el siguiente código,
Su CSS se verá como a continuación,
/* 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; }su HTML sea como a continuación,
<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>