How to use mouse enter and mouse exit or hover
<p>I want to show and hide one popup/tooltip on mouse hover.</p>

<p>popups are multiple as below </p>

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

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