That Little Triangle in Bootstrap Popover

Reaction Component

There is a side learning project I am working on  and I want to apply a popover UX to a specific component.

reaction 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:

https://getbootstrap.com/docs/4.0/components/popovers/

Specifically, this triangle:

bootstrap_popover

The css for that looks alien. Fortunately, css-tricks is here to explain it.

CSS Triangle

The Shapes of CSS

End Product

Voila!

news item component

When user clicks on a person, the “Popover” shows.

But wait. Bug!

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.

UPDATE:

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:

bootstrap_reaction

 

Published by jfaquinojr

C# and VueJS Fanboy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: