Question

8

How to use mouse enter and mouse exit or hover

rated 0 times [ 9] [ 1] / answers: 1 / hits: 22619 / 8 Years ago, mon, april 11, 2016, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jenna

Add To Favorites

Follow

Total Points: 706

Total Questions: 107

Total Answers: 106

Location: Azerbaijan

Member since Tue, Sep 21, 2021

3 Years ago

answered 8 Years ago amari · Accepted Answer

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;

  }

}