DEV Community

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

Posted on

Angular: Design Pop Over

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:

<p (mouseover)="showPopOver = true" (mouseleave)="showPopOver = false">
  Show Pop Over!

<div *ngIf="showPopOver" class="pop-over">
  <p>It's a pop-over</p>
Enter fullscreen mode Exit fullscreen mode
import { Component, VERSION } from '@angular/core';

  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
export class AppComponent {
  showPopOver = false;
Enter fullscreen mode Exit fullscreen mode
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.

You can follow me here:


Top comments (0)