Show HN: React-hint – 150LoC Tooltip Component for React, Preact and Inferno | Hacker News Reader

Show HN: React-hint – 150LoC Tooltip Component for React, Preact and Inferno

github.com

37 pointsslmgc15 comments

So good to see libraries made to be compatible with both React, Preact and Inferno. Unless Facebook changes it's React open source license, this will probably become standard for most of the libraries made for React.

I made this library a while ago, long before all this hype about React's license (which was with the questionable clause from the beginning). I added support for Preact as I liked the minimalistic style of Preact, used it in my own projects and Jason was really responsive solving Preact's compatibility issues. Later on, Dominic asked if I want to add support for Inferno, which I did. I really love that there are different library implementations with compatible API, so you can choose a proper solution based on its pros/cons.

Just curious even though it's a really long shot, is it related in any way to Picnic CSS' Tooltip [1] (disclaimer: my own)? The button "Custom" and the black tooltip look quite similar, it is probably just chance but would love to know.

[1] https://picnicss.com/documentation (+ click on tooltip)

PS, I had the same feeling about a Google IO presentation but told myself that it was just a generic style; then I saw in the source a `css('picnic.css')`!

Isn't it the most generic css tooltip style on the internet? (just black tooltip with white text and border-radius)

Yes but I meant a combination of the tooltip + the button + the button hover. It is still quite common though, but no problem with asking I hope :)

Nope, it's a pure coincidence as I've made the button style just to record the GIF. As for the tooltip itself, it uses a generic style, but thanks for the link to your project, looks nice :)

How does it deal with UU/accessibility?

It looks like it doesn't. Tabbing through elements to focus on a button with it applied doesn't bring the hint up automatically, which would probably be the best experience here.

Just bringing it up wouldn't be enough, though, it has to be announced to screen readers. Or it would have to have a non-interactive way to work for screen readers.

Reason I'm asking is that this is non-trivial, and takes time to verify with different browsers and NVDA and JAWS. Having dependencies solving these issues are great.

That's a good question, thanks! I didn't think about that, but, surely, this functionality should be added. I will try to research what would be the best solution for accessibility.

Nice to see compatibility with Preact and Inferno too. I use Preact a lot and only downside I experience really is lack of library support.

Have you tried making an alias for react with the library preact-compat in webpack config? It should make a lot of react libraries work seamlessly with preact too.

Yes that works in most cases but I strive not to use preact-compat - like to keep things lightweight.

Yep, it works just fine without Preact's compatibility layer:

  import {h, Component} from 'preact'
  import {ReactHintFactory} from 'react-hint'
  import 'react-hint/css/index.css'

  const ReactHint = ReactHintFactory({createElement: h, 
  Component})

Thanks for sharing, nice work!

Btw if anyone will need similar component for vue, here is one: https://github.com/euvl/vue-js-popover

Reply on news.ycombinator.com