Show HN: Popper.js, a 3KB library to manage tooltips and popovers
github.comPerhaps I'm an idiot, but it wasn't immediately clear to me that the examples were actually examples. They looked like images. I only discovered that they were interactive after I got frustrated that I couldn't find the 'examples' section. Here's the page I'm referring to: http://fezvrasta.github.io/popper.js/
Anway, looks like a great project :)
Oh... Any idea to make them look more like examples?
Make a button that says "click me" that displays the first one. Then people know what they're looking for and have their attention drawn to it.
Good idea, thanks!
In my opinion the only one that wasn't immediately obviously an example was the scroll one, due to the lack of scrollbars (I thought "scroll" was referring to the page and was confused about why it wasn't moving when I scrolled the page).
Stupid mac scrollbars :P I'll do something to increase the visibility of the examples then. Thanks again!
I wouldn't recommend the CSS route as you'd be working against a core OS feature. On OS X: System Prefs > General > Show scroll bars > "Automatically based on mouse or trackpad"; "When scrolling"; "Always".
It's possible via something like [1], but the problem is you are hardcoding colors for a specific OS version. The example given in the link is a much darker scrollbar than is present in Yosemite.
I'd just go the route of labeling the example more explicitly. By the way, nice job on the site. Very snazzy, and you didn't make the mistake a lot of people make which is to hijack the native scrolling.
I think there is CSS that can make your scrollbars actually visible
::-webkit-scrollbar { width: 1em; }
It just reserve space for the scrollbar but doesn't make them appear
div.mydiv { overflow-y: scroll; }
This is not a 3kb library for popups, given that the main source file popper.js is 44.6kb and the minimized version is 13.5kb large. I'm assuming 3kb refers to the gzipped size, but this isn't so meaningful because parsing and loading the javascript is more significant than reading a few extra kilobytes from a socket.
That said, this looks like a very nice library.
Yes I refer to the gzipped size as usually the other libraries do. I don't think that gzipping is so heavy on system resources considering that most of the websites are gzipped nowadays
gzipping is cheap, but it's not a very meaningful indicator of anything. It only refers to bandwidth and only for the first site visit. Even for js-heavy sites all the minimized and gzipped javascript put together will be smaller than a single png file.
That the library doesn't have dependencies is much more important, because then it can be loaded in parallel with other libraries. That matters a lot for performance.
Labeling everything in their gzip size (without the real size) is a bad new trend in my opinion. It feels like an unfair marketing practice since older projects won't mention gzip at all. I use gzip, but I don't think of my project in gzip numbers. The biggest issue I have with it is that now if somebody explicitly does not state whether or not they are talking about real size or gzip size, is likely that both of us don't know which size is being talked about. It feels like Fahrenheit and Celsius both being used unlabeled. I still think in real size, so it's an extra conversion for me when people use gzip only.
On the project website it's specified tho :-)
Talking about a trend, not a specific project website tho :-)
I've heard, secondhand, from disabled people that tooltips are particularly troublesome for screen readers, keyboard traversal, etc. Might be worth looking into things that would reduce the pain, like associating the tooltips with their "parent" element via <label> or aria tags, etc.
Surely must be done something for this problem. But Popper.js wants just to position your popper in the page. The rest is up to the developer.
Well, given that the api does this:
Popper.js already knows that referenceElement is the association, so it seems reasonable to consider if it should (maybe optionally) create the <label> or aria association between the two.var popper = new Popper(referenceElement, onBottomPopper, { placement: 'bottom' });Similar for default keybindings that make sense.
I think this feature would be a perfect fit for a Popper.js plugin!
The is the CSS only option from Primer (GitHub design guideline). If you use in your project is the tiniest that i've ever seen and it's easy to customize via SASS. (the time that is default it's not good in my opinion, but you can change, it's a SASS variable.
I'd love to use CSS for all my poppers needs.. unluckily this is not possible yet due to CSS limitations :(
Those tooltips don't work on mobile.
> GPU ACCELERATION
> If supported by browser, poppers will be positioned using CSS translate3d, making your poppers even faster!
When you use translate3d, the element is moved to a different rendering layer, rendered by the GPU. This improves the fluidity of it
I didn't know that, thanks!
I wonder what the difference is with Tether
Hi! Popper.js dev here.
There are several advantages:
- The size is half of Tether (3.5 vs 7);
- Popper.js doesn't need any additional CSS in your page;
- It works even with elements not placed as direct children of body;
- It's much much faster (compare both on mobile, you'll see Tether lagging a lot!);
- It automatically detects the size of the tooltip arrow;
- Inside Popper.js you already have a way to create tooltip elements automatically, with Tether you need an additional library;
- Popper.js supports particular "flip" behaviors, you can decide that if there's not space on the left, the tooltip must move on the bottom (for example);
- The whole code is fully documented with JSDoc!
I hope this answers your question
I've actually been looking for something that goes the other way. The main issue i've had with Tether and React is that Tether does too much. I don't want a lib that manipulates the DOM itself, I want a overlay positioning engine that I can use to position an element (much like Popper and Tether), but that leaves the positioning up to me (ie let React keep full control of the DOM). Obviously i'd need to subscribe to position updates too, for scroll and resize (and any other) events. I tried to do this using Tether as a starting point, but it was a painful experience trying to to untangle its code.
When I talk about engines, I mean things like Zynga's Scroller (https://github.com/zynga/scroller), essentially a purely logical set of functionality that doesn't assume a particular view-level implementation.
This is exactly the direction I want to take with Popper.js!! The part that sets the style to the DOM will soon be moved to a modifier/plugin so that it can be disabled and replaced with a modifier which just exports the coordinates.
That sounds promising. So conceptually you'd end up with something like popper-engine and popper?
Yup something similar
Please checkout this PR for React support https://github.com/FezVrasta/popper.js/pull/11
Totally understand your pain. Did you try https://huu.la? It never messes up with the user's page DOMs and you don't even need to write code to use it.
May you avoid spam please?
Hey man, take it easy ;)
Huula does solve the problem the user is facing, so by any means, this is not spam at all.
And BTW, we are targeting different segments. You want to serve developers, I want to serve non-tech person, like HRs, Operations, etc. So technically, we are not competitors!
It's just a question of respect
What minimum browsers does this support? I glanced through the documentation, but did not notice it.
Awesome work, by the way.
Tested it in browserstack, works in IE10+. IE9 is close but doesn't work when the browser is small. IE8 doesn't work at all (go figure)
I've tested it on Chrome, Firefox, Edge, Safari, Safari Mobile and Chrome Mobile (latest versions) but I suspect it works on older versions as well.
Awesome!
If you want to segment a guide for just certain users (based on what properties you send to platform), you can try http://onboardx.com
Looks great. FYI, I can see the border between the rectangle and the triangle on all the poppers. I think it'd look better if it wasn't there.
May you open an issue giving more details about this problem? Browser, OS, screen res etc? Thanks!
I am wondering how well does this work on svg?
Also, I couldn't find the option to choose tooltip or popover, what's the default and how do I specify tooltip/popover?
The library just positions poppers, it doesn't decide about the behavior.
I've tested popper.js on svg and it seems to work well but I need to write some test for them.
Ah, I see. I was wondering for a long time why the "poppers" in the examples are static.
Maybe coding the animation requires more JavaScript and increase the code base? Seems to me that some basic animation as popover/tooltip would be nice to have.
I'm trying to keep the library as specialized as possible. Nothing prevent you/someone to write a plugin to add more behaviors tho
Has anyone tested it with react? It messes with my routes for some reason.
Warning: [react-router] You cannot change <Router routes>; it will be ignored
I've not yet tested it with React but I hardly believe that it can break the react-router... If you can reproduce it on the codepen boilerplate you find in CONTRIBUTING.md and post an issue I can give it a look!
May be i did not look at right place. There seems to be no accessibility support ? Is it something that is planned for the future release ?
Do you refer to something like this? https://news.ycombinator.com/item?id=11440665
Maybe it's just me but the text inside the tooltip looks fuzzy, rest of the text looks crisp. On chrome 49, windows 7.
It's a problem I've already fixed on the master branch. I'm going to release it soon.
edit: released 0.2.5 https://github.com/FezVrasta/popper.js/releases/tag/v0.2.5
Popovers are the worst feature of the modern web. They're usually a very aggressive way of drawing attention to something I don't care about. Even when they're supposed to be a useful part of a web page interface, it's an obsolete modal dialog paradigm.
Should I block popper.js via an ad blocking filter?
I'm not sure I understand your comment, perhaps we have different understanding of what a popover is?
For me a popover is essentially a small overlay of additional contextual information, visually attached to whatever it's providing additional context for. Historically triggered by hover, but increasingly triggered by click/touch. A drop-down menu in a navigation bar is a popover.
Maybe he talks about "popups"
[Shameless Self-Promotion] For guys who don't want to write code to create smart popovers/tours in rich text, video, image, etc. I created a free online service https://huu.la .
p.s. It doesn't mess up with the DOM element you are creating for.