Perhaps 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/
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).
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.
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.
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.
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.
var popper = new Popper(referenceElement, onBottomPopper, {
placement: 'bottom'
});
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.
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.
> GPU ACCELERATION
> If supported by browser, poppers will be positioned using CSS translate3d, making your poppers even faster!
How is a transformation accelerated by the GPU? I'm pretty sure translations are done on the CPU before sending the final transformation matrix to the GPU.
- 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);
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.
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.
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!
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'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!
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.
[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.
Anway, looks like a great project :)