DEV Community

Cover image for Smarter Tooltips and Popovers with Popper 2

Smarter Tooltips and Popovers with Popper 2

Federico Zivolo on January 22, 2020

Four years ago I released the first version of a library with the goal to solve a problem that is as simple as it is complex: positioning poppers. ...
Collapse
 
panphora profile image
David Miranda

Hi, thank you for your amazing work!

I'm curious if Popper is a good fit for my project. I need a library that will position elements directly over other elements -- not beside them -- to create the illusion of an inline edit area.

Do you think Popper would be a good fit for this or not?

Collapse
 
fezvrasta profile image
Federico Zivolo

Take a look at the offset modifier, it can apply negative offsets to make the popper overlap with its reference element

Collapse
 
panphora profile image
David Miranda • Edited

So, the best way to get a popover to appear directly above an element would be to use the offset option as a function, as seen in the docs and use the reference element's dimensions to calculate the offset?

Thread Thread
 
fezvrasta profile image
Federico Zivolo

Yes, you'd do something like this:
codesandbox.io/s/epic-silence-i7680

Thread Thread
 
panphora profile image
David Miranda

Great, thank you!

Collapse
 
wimleers profile image
Wim Leers

Congratulations! :)

For those projects that depend on Popper 1, it'd be super valuable to have explicit "Upgrading from Popper 1 to Popper 2" docs. AFAICT that doesn't exist yet (I looked at github.com/popperjs/popper-core/re..., popper.js.org/docs/v2/tutorial/ and in this blog post). It could make an enormous difference in terms of Popper 2 adoption: without clear docs that cover both the most commonly encountered backwards compatibility breaks that need to be overcome and warn about the harder edge cases, many projects will probably stick with Popper 1. This would increase the maintenance burden too.

In any case: congratulations, awesome work, and thank you for this very valuable contribution! We're looking forward to hopefully updating Drupal from Popper 1 to 2 soon :)

Collapse
 
fezvrasta profile image
Federico Zivolo

Thanks! I plan to write a note to help the upgrade process, there aren’t a lot of breaking changes luckily.

Collapse
 
akirautio profile image
Aki Rautio

Huge thanks from creating Popper! It has been tremendous help whenever I have needed to develop some type of a pop element like a tooltip or a menu.

The documentation certainly has changed to be a lot more understandable and it looks super beautiful.

Collapse
 
ciberninjas profile image
Visit me on 🐦 @ciberninjas

Good. I would like to know, if someone knows the use of this library to create a pop up that can be used to share the selected content through the networks.

Just like Medium does with its pop-up window after selecting a piece of text.

I think it would be a great idea .. Especially focused on the SSG. As Jekyll, etc. Something that probably a lot of people would use. They do not believe?

Well, I'm leaving. I just came to give you the idea. Unfortunately I don't know enough to create it :(

¡Thank you for all the work you do!

Collapse
 
fezvrasta profile image
Federico Zivolo • Edited

Hi, Medium used to use Popper for that functionality. Here's an example codepen.io/FezVrasta/pen/vWXQdq

Collapse
 
rannieperalta profile image
Rannie

Thanks for the popcorn! 🍿

Collapse
 
kamagatos profile image
Mohamed kamagate

You're doing an amazing job Federico! Thanks for Popper!

Collapse
 
joelkang profile image
Joel Kang

Thanks so much for doing all the heavy lifting, Federico!

Collapse
 
seejamescode profile image
James Y Rauhut • Edited

Thank you for sticking with the project and all of the contributions! People are mean, but you’ve got a great attitude of staying positive.

We can’t wait to make the upgrade at Pingboard!

Collapse
 
calvinf profile image
Calvin Freitas

Super cool, looking forward to using the new version!

Collapse
 
lauriii profile image
Lauri Eskola

Congrats on the release! 🎉