Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 16, 2022 06:11 pm GMT

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:

<!--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>
//component.tsimport { Component, VERSION } from '@angular/core';@Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: ['./app.component.scss'],})export class AppComponent {  showPopOver = false;}
//component.scssp {  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;}

Here you can see the same in live:

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

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

Thanks.


Original Link: https://dev.to/urstrulyvishwak/angular-design-pop-over-150d

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To