Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Popper.js, a 3KB library to manage tooltips and popovers

github.com

Post reply on HN
Print view View original

21–30 of 62 posts

Re: Show HN: Popper.js, a 3KB library to manage tooltips and popovers

#21

Post by FezVrasta »

tyingq wrote: post #19
FezVrasta wrote: post #17

Earlier quoted context omitted.

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: 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 or aria association between the two. Similar for default keybindings that make sense.

I think this feature would be a perfect fit for a Popper.js plugin!

Re: Show HN: Popper.js, a 3KB library to manage tooltips and popovers

#22

Post by FezVrasta »

technological wrote: post #20

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

Re: Show HN: Popper.js, a 3KB library to manage tooltips and popovers

#23

Post by andrewingram »

FezVrasta wrote: post #3
yuribit wrote: post #2

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 tool…

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.

Re: Show HN: Popper.js, a 3KB library to manage tooltips and popovers

#24

Post by FezVrasta »

andrewingram wrote: post #23
FezVrasta wrote: post #3

Earlier quoted context omitted.

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 tool…

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…

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.

Re: Show HN: Popper.js, a 3KB library to manage tooltips and popovers

#26

Post by idbehold »

imaginamundo wrote: post #16

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. http://primercss.io/tooltips/

Those tooltips don't work on mobile.

Re: Show HN: Popper.js, a 3KB library to manage tooltips and popovers

#28

Post by FezVrasta »

TheGuyWhoCodes wrote: post #25

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

Re: Show HN: Popper.js, a 3KB library to manage tooltips and popovers

#30

Post by alanh »

FezVrasta wrote: post #8
chipperyman573 wrote: post #7

Earlier quoted context omitted.

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 think there is CSS that can make your scrollbars actually visible
Post reply on HN