String value with commas separated and show in tooltip html

Hi All,

I am getting string value from my api call code1,code2,code3,code4. I would like to display field like code1+ . Once user hover on code1+ I would like expect the result look like below. I tried using ellipses in css but it did not work. Could you please let me know your inputs on how to implement in html/Angular.

        code1
        code2
        code3
        code4
    
    Thank you

We could use *ngIf to conditionally render elements on mouse over event on parenting element. Of course we would need to think of something clever to not trigger mouseout when user moves over elements if you want to hover over the span's as well.

<div (mouseout)="isHovering = false" (mouseover)="isHovering = true">
  <div *ngFor="let code of codes; index as i">
    <span *ngIf="i === 0 || isHovering === true">{{ code }}</span>
  </div>
</div>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  string = 'code1,code2,code3,code4';
  codes = [];
  isHovering = false;
  ngOnInit() {
    of(this.string).subscribe((response) => {
      this.codes = response.split(',');
      console.log(this.codes);
    });
  }
}

Working example: https://stackblitz.com/edit/angular-ivy-tu6uhl?file=src%2Fapp%2Fapp.component.ts

CSS variant

If we could break strings by comma in CSS we could make this pure CSS as well but we can't (https://stackoverflow.com/a/39646292/15439733), only breaking with spaces is possible so we would need to use javascript to pre-process the string. But after that using :hover we either show the "short" version of the string, or "long" version. (http://bluegalaxy.info/codewalk/2018/04/05/html-css-expand-text-hover/)

A CSS variant of this would look like so:

/* Container for the text that expands on hover */
.expanded-text {
  width: 100%;
}
/* Longer name hidden by default  */
span.longer-name{
  display:none;
}
/* On hover, hide the short name */
.expanded-text:hover span.short-name{
  display:none;
}
/* On hover, display the longer name.  */
.expanded-text:hover span.longer-name{
  display:block;
}

<div class="expanded-text">

  <span class="short-name">{{ codes[0] }}</span>

  <span class="longer-name">
    <ng-container *ngFor="let code of codes">
      {{ code }}
      <br>
    </ng-container>
  </span>
  
</div>

Working example: https://stackblitz.com/edit/angular-ivy-rbjgzr?file=src%2Fapp%2Fapp.component.css

If I were to pick one I would go with CSS route as long as I know I don't need to do anything else but expand/contract this single piece of string. Because using (mouseout) and (mouseover) adds extra listeners on our page that we may not want. Besides the listeners may not fire when you have a lot of stuff going on on your page as your app scales. More importantly: CSS rendering doesn't run on JS thread.