15 ms·
Show HN: Popper.js, a 3KB library to manage tooltips and popovers
- yuribit 11y agoI wonder what the difference is with Tether
- FezVrasta 11y agoHi! 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
- yuribit 11y agoAwesome!
- mountaineer22 11y agoWhat minimum browsers does this support? I glanced through the documentation, but did not notice it. Awesome work, by the way.
- FezVrasta 11y agoI'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.
- chipperyman573 11y agoTested 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)
- andrewingram 11y agoI'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 https://github.com/zynga/scroller), essentially a purely logical set of functionality that doesn't assume a particular view-level implementation.
- FezVrasta 11y agoThis 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.
- andrewingram 11y agoThat sounds promising. So conceptually you'd end up with something like popper-engine and popper?
- FezVrasta 11y agoYup something similar
- huula 11y agoTotally understand your pain. Did you try https://huu.la 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.
- FezVrasta 11y ago
- 23andwalnut 11y agoPerhaps 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/ http://fezvrasta.github.io/popper.js/ Anway, looks like a great project :)
- FezVrasta 11y agoOh... Any idea to make them look more like examples?
- chipperyman573 11y agoIn 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).
- FezVrasta 11y agoStupid mac scrollbars :P I'll do something to increase the visibility of the examples then. Thanks again!
- alanh 11y agoI think there is CSS that can make your scrollbars actually visible
- riccardoforina 11y ago::-webkit-scrollbar { width: 1em; }
- FezVrasta 11y agoIt just reserve space for the scrollbar but doesn't make them appear
- ciokan 11y agoHas 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
- FezVrasta 11y agoI'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!
- tyingq 11y agoI'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.
- FezVrasta 11y agoSurely 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.
- tyingq 11y agoWell, given that the api does this: 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. Similar for default keybindings that make sense.
- FezVrasta 11y agoI think this feature would be a perfect fit for a Popper.js plugin!
- imaginamundo 11y agoThe 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. http://primercss.io/tooltips/ http://primercss.io/tooltips/
- technological 11y agoMay 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 ?
- FezVrasta 11y agoDo you refer to something like this? https://news.ycombinator.com/item?id=11440665 https://news.ycombinator.com/item?id=11440665
- TheGuyWhoCodes 11y agoMaybe it's just me but the text inside the tooltip looks fuzzy, rest of the text looks crisp. On chrome 49, windows 7.
- FezVrasta 11y agoIt'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 https://github.com/FezVrasta/popper.js/releases/tag/v0.2.5
- eduardo_costa 11y agoSwear to god I read "Pooper.js" and got afraid of what it really does.
- paradite 11y agoI 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?
- FezVrasta 11y agoThe 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.
- paradite 11y agoAh, 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.
- FezVrasta 11y agoI'm trying to keep the library as specialized as possible. Nothing prevent you/someone to write a plugin to add more behaviors tho
- gizmo 11y agoThis 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.
- FezVrasta 11y agoYes 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
- gizmo 11y agogzipping 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.
- Can_Not 11y agoLabeling 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.
- FezVrasta 11y agoOn the project website it's specified tho :-)
- dreamlayers 11y agoPopovers 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?
- andrewingram 11y agoI'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.
- FezVrasta 11y agoMaybe he talks about "popups"
- deleted 11y ago[deleted]
- huula 11y ago[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 https://huu.la . p.s. It doesn't mess up with the DOM element you are creating for.
- rootlocus 11y ago> 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.
- jazoom 11y agoLooks 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.
- FezVrasta 11y agoMay you open an issue giving more details about this problem? Browser, OS, screen res etc? Thanks!
- kleampa 11y agoIf you want to segment a guide for just certain users (based on what properties you send to platform), you can try http://onboardx.com http://onboardx.com