I'm experimenting with creating a dynamic popover that adjusts its position based on whether it's viewed on a mobile device or desktop.
Although I've made progress, the challenge lies in ensuring reusability. When resizing the container, the popover fails to display in the intended location.
Here is the HTML structure:
<div class="button-cont">
<div class="input-group mb-3 button-container">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append button-calendar" (click)="show()">
<span class="input-group-text">.00</span>
</div>
<div class="custom-tooltip" #tooltip>
Hello
</div>
</div>
</div>
CSS styling:
.button-cont {
height: 100%;
width: 100%;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button-container {
position: relative;
padding: 1rem 1rem;
height: 3rem;
width: 30rem;
}
.button-calendar {
cursor: pointer;
}
.custom-tooltip {
height: 5rem;
background-color: white;
width: 5rem;
position: absolute;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
border-radius: 8px;
left: 26rem;
bottom: -93px;
opacity: 0;
@media(max-width: 600px) {
margin-left: auto;
margin-right: auto;
bottom: -86px;
left: 50%;
transform: translateX(-50%)
}
}
.show-tooltip {
opacity: 1
}
Additionally, here's the Angular code snippet used to trigger the popover:
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
@Component({
selector: "app-ngx-bootstrap",
templateUrl: "./ngx-bootstrap.component.html",
styleUrls: ["./ngx-bootstrap.component.scss"]
})
export class NgxBootstrapComponent implements OnInit {
@ViewChild("tooltip") tooltip: ElementRef;
isOpen = false;
constructor() {}
ngOnInit() {}
show() {
if (!this.isOpen) {
this.tooltip.nativeElement.classList.add("show-tooltip");
} else {
this.tooltip.nativeElement.classList.remove("show-tooltip");
}
this.isOpen = !this.isOpen;
}
}
The focus currently is on achieving the correct positioning, rather than the visual appearance of the component. Here's the desired placement:
https://i.sstatic.net/fFrRl.png
Requirements:
1) On mobile devices, the popover should be centered horizontally below the input group.
2) For desktop views, the popover should appear below the button (calendar) and slightly to the right.
While there has been progress, adjustments are needed to maintain proper alignment when modifying the size of the input-group.
Check out the live demo on StackBlitz here