There is a side learning project I am working on and I want to apply a popover UX to a specific component.
Initially I wanted to show this in a modal window for simplicity’s sake.
But why simplify things when we can complicate them?
Enter Bootstrap Popover
What am I talking about? This bootstrap popover:
Specifically, this triangle:
The css for that looks alien. Fortunately, css-tricks is here to explain it.
When user clicks on a person, the “Popover” shows.
But wait. Bug!
Looking back to the bootstrap 4 source code, they implemented it using absolute positioning, so I guess that’s where I am headed now.
Anyway, gotta go to work, stay tuned for any progress.
I am so over this now that I learned about the triangle thingy and ::after css selectors and all that shit.
The links I shared above explained how to create a triangle effect using an empty div and showing/hiding its borders and then putting them in ::after/::before elements.
So I decided to give up and just use the bootstrap popover and move on because life is short.
Here it is: