DEV Community

Cover image for Angular: Design Pop Over
Kurapati Mahesh
Kurapati Mahesh

Posted on

Angular: Design Pop Over

#javascript #typescript #angular #css

In almost every SPA, popover is very much used component in Angular.

Here, I am going to design simple pop over. Someone, who are going to make use of this can improve further based on your requirements.

Here is the code:

<!--component.html--> <p (mouseover)="showPopOver = true" (mouseleave)="showPopOver = false"> Show Pop Over! </p> <div *ngIf="showPopOver" class="pop-over"> <p>It's a pop-over</p> </div>
Enter fullscreen mode Exit fullscreen mode 
//component.ts import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { showPopOver = false; }
Enter fullscreen mode Exit fullscreen mode 
//component.scss p { cursor: pointer; } .pop-over { position: absolute; align-items: center; justify-content: center; border: 1px solid black; border-radius: 10px; width: 16rem; padding: 8rem; z-index: 1; box-shadow: 5px 10px grey; } .pop-over::before { border-width: 10px; border-style: solid; border-color: transparent transparent grey transparent; top: -20px; left: 4px; content: ''; position: absolute; }
Enter fullscreen mode Exit fullscreen mode

Here you can see the same in live:

Hover over Show Pop over! and observe pop over being shown.

angular-ivy-hnuxva.stackblitz.io

You can follow me here: https://twitter.com/urstrulyvishwak

Thanks.

Top comments (0)