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

Perhaps I&#x27;m an idiot, but it wasn&#x27;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&#x27;t find the &#x27;examples&#x27; section. Here&#x27;s the page I&#x27;m referring to: <a href="http:&#x2F;&#x2F;fezvrasta.github.io&#x2F;popper.js&#x2F;" rel="nofollow">http:&#x2F;&#x2F;fezvrasta.github.io&#x2F;popper.js&#x2F;</a><p>Anway, looks like a great project :)

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&#x27;m assuming 3kb refers to the gzipped size, but this isn&#x27;t so meaningful because parsing and loading the javascript is more significant than reading a few extra kilobytes from a socket.<p>That said, this looks like a very nice library.

I&#x27;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 &quot;parent&quot; element via &lt;label&gt; or aria tags, etc.

The is the CSS only option from Primer (GitHub design guideline). If you use in your project is the tiniest that i&#x27;ve ever seen and it&#x27;s easy to customize via SASS. (the time that is default it&#x27;s not good in my opinion, but you can change, it&#x27;s a SASS variable.<p><a href="http:&#x2F;&#x2F;primercss.io&#x2F;tooltips&#x2F;" rel="nofollow">http:&#x2F;&#x2F;primercss.io&#x2F;tooltips&#x2F;</a>

<p><pre><code> &gt; GPU ACCELERATION &gt; If supported by browser, poppers will be positioned using CSS translate3d, making your poppers even faster! </code></pre> How is a transformation accelerated by the GPU? I&#x27;m pretty sure translations are done on the CPU before sending the final transformation matrix to the GPU.

I wonder what the difference is with Tether

If you want to segment a guide for just certain users (based on what properties you send to platform), you can try <a href="http:&#x2F;&#x2F;onboardx.com" rel="nofollow">http:&#x2F;&#x2F;onboardx.com</a>

Looks great. FYI, I can see the border between the rectangle and the triangle on all the poppers. I think it&#x27;d look better if it wasn&#x27;t there.

I am wondering how well does this work on svg?<p>Also, I couldn&#x27;t find the option to choose tooltip or popover, what&#x27;s the default and how do I specify tooltip&#x2F;popover?

Has anyone tested it with react? It messes with my routes for some reason.<p>Warning: [react-router] You cannot change &lt;Router routes&gt;; it will be ignored

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 ?

Maybe it&#x27;s just me but the text inside the tooltip looks fuzzy, rest of the text looks crisp. On chrome 49, windows 7.

Popovers are the worst feature of the modern web. They&#x27;re usually a very aggressive way of drawing attention to something I don&#x27;t care about. Even when they&#x27;re supposed to be a useful part of a web page interface, it&#x27;s an obsolete modal dialog paradigm.<p>Should I block popper.js via an ad blocking filter?

[Shameless Self-Promotion] For guys who don&#x27;t want to write code to create smart popovers&#x2F;tours in rich text, video, image, etc. I created a free online service <a href="https:&#x2F;&#x2F;huu.la" rel="nofollow">https:&#x2F;&#x2F;huu.la</a> .<p>p.s. It doesn&#x27;t mess up with the DOM element you are creating for.