How to use mouse enter and mouse exit or hover

Question

I want to show and hide one popup/tooltip on mouse hover.

popups are multiple as below

 <div class="hotspot_info pointer" style="    top: {{towerPoint.posY}}%;    left: {{towerPoint.posX}}%;" *ngFor="#towerPoint of visualisation.towerPoints">
            <div class="tower-details"  style="    position: absolute;    top: -90px;    left: -84%;">
                <div class="popover top" style="display: block;">
                    <div class="arrow" style="left: 50%;"></div>
                    <h3 class="popover-title">{{towerPoint.tower.name}}</h3>
                    <div class="popover-content">Tower Name</div>
                </div>
            </div>

on hover to ".tower-details" I want to show ".popover" and on mouseexit from hide ".popover"

Answer 1

To listen on a single tag you can use:

@Component({
  selector: 'my-component',
  directives: [PopUp],
  template: `
<div (mouseover)="mouseover=true" (mouseout)="mouseover=false">xxx</div>
<pop-up *ngIf="mouseover">some content</pop-up>
`
})
class MyComponent {
  mouseover:boolean;
}

See also What is the difference between the mouseover and mouseenter events?

For a component to listen on itself on the mouse events you can use:

@Component({
  selector: 'my-component'
  directives: [PopUp],
  template: `
    xxx
    <pop-up *ngIf="mouseover">some content</pop-up>`
})
class MyComponent {
  mouseover:boolean;

  @HostListener('mouseover')
  onMouseOver() {
    this.mouseover = true;
  }

  @HostListener('mouseout')
  onMouseOut() {
    this.mouseover = false;
  }
}