
Show HN: React-hint – 150LoC Tooltip Component for React, Preact and Inferno - slmgc
https://github.com/slmgc/react-hint
======
thomasfl
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.

~~~
slmgc
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.

------
franciscop
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](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')`!

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

~~~
franciscop
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 :)

------
maaaats
How does it deal with UU/accessibility?

~~~
akrigline
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.

~~~
maaaats
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.

------
PascalW
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.

~~~
thomasfl
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.

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

~~~
slmgc
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})

------
yev
Thanks for sharing, nice work!

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

