
Show HN: Hint.css v2.0 – Pure CSS tooltip library - chinchang
http://kushagragour.in/lab/hint/
======
sylvinus
For those wondering, the main trick is here:
[https://github.com/chinchang/hint.css/blob/master/hint.css#L...](https://github.com/chinchang/hint.css/blob/master/hint.css#L65)

This creates a pseudo ":after" element with content set to the value of the
data-hint attribute. Smart!

[https://developer.mozilla.org/en-
US/docs/Web/CSS/attr](https://developer.mozilla.org/en-US/docs/Web/CSS/attr)

~~~
aidos
That's amazingly useful. I'd never seen that before. It says that support
other than with 'content' is experimental. Where else does it work? Does
anyone have any other useful / novel use cases they could share?

~~~
addedlovely
I believe it's pretty solid:
[http://caniuse.com/#search=CSS%20Generated%20content%20for%2...](http://caniuse.com/#search=CSS%20Generated%20content%20for%20pseudo-
elements)

Also checkout the pseudo counter: [https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Lists_a...](https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)

------
grumblestumble
I haven't verified this, but I really doubt that this, or any other CSS-only
solution, will work with elements constrained in an `overflow: hidden` block
with a fixed height too short to display the tooltip. Which is a fairly common
scenario when building app UIs. Most of the work done by Javascript tooltip
libraries is figuring out the correct position relative to the <body> tag and
appending the tooltip element outside of normal flow constraints.

Also, a good JS solution will dynamically reposition the tooltip if the
requested orientation results in the tooltip being clipped by the viewport
(eg. switch from right to left, top to bottom).

------
10dpd
How accessible is this approach to screen reader users and people who rely on
keyboard interaction alone?

Edit: A quick test reveals these tooltips are not accessible at all.

~~~
kdamken
Unfortunately that's a major deal breaker for using this for any professional
project. Making things accessible isn't really that hard, and it makes the
lives of people who need it much easier. It's a shame it's not more common
place.

~~~
oneeyedpigeon
Yup. Use of the title attribute would be better, but I don't think there's a
way to turn off the default behaviour, unfortunately.

------
ryannevius
On one of the very first tooltips at the very top of the landing page (the
download button), my Chrome v48.0.2564.97 browser renders a very thin gap
between the triangle of the tooltip and the content rectangle. Not a great
first impression...Is anyone else seeing this? I suspect it has something to
do with pixel percentages.

~~~
nailer
Ditto. I was also zoomed at 150%, zooming in to 100% makes it go away.

Still worth fixing if possible, since many users browse at non-100% zoom.

~~~
ToastyMallows
> "many users browse at non-100% zoom"

This sounds dubious. Do you have a source for this?

~~~
eximius
I've run into some issues with webpages I've designed where the users are
browsing at 150%-250% regularly. I'm not quite sure what to do about it. It's
different than when a tablet zooms, which is literally just zooming in...
browsers make things bigger (text, images, etc) and it screws with things.

~~~
mbrock
The solution is called "responsive design." From your perspective, my zoomed
browser just has different proportions. If your site renders well on a phone
due to responsive CSS, then it should be okay in a zoomed browser too.

(I'm browsing Hacker News at 200% right now. It works great since their latest
responsive fix.)

------
ohitsdom
What is going on when the tooltip first shows as blurry, then becomes clear?
The most obvious example is hovering over the download button. Does CSS scale
transform always behave this way?

~~~
chinchang
In the 'download' button case, the download button is itself scaling up which
makes the tooltip inside it scale up too. Thats the reason of blur (which
comes with scaling elements)

~~~
famfamfam
I am seeing blurry text on every tooltip as it animates in, not just the one
on the download button. I assume it is related to ClearType rendering the text
on non-pixel locations.

Chrome 47, Windows 8, ClearType enabled.

------
Smudge
> Small file size. Only 1.5KB minified and gzipped!

Well I guess everything is relative...

~~~
elcct
It's not like you have to cut off cm of your body for every KB your website is
using...

------
bevacqua
Here's an alternative I wrote a long time ago:
[https://github.com/bevacqua/hint](https://github.com/bevacqua/hint)

\- Stylus or plain CSS

\- Comes with a bit of JavaScript

    
    
      - Auto-docks to browser window edges
    
      - Multi-line if hint is too long
    
      - Transitions

------
porker
Good work!

> "Works in all modern browsers."

It'd be really helpful if you listed which browsers it's been tested to work
in.

~~~
patates
I think it is IE9+, as I understand from here: [http://caniuse.com/#feat=css-
gencontent](http://caniuse.com/#feat=css-gencontent)

~~~
robin_reala
IE8+ as they’re using the CSS2.1 single-colon pseudoelement syntax rather than
CSS3’s double-colon syntax.

------
billyhoffman
An interesting hack in minimalism. They accomplish being able to display user
defined text in tooltips without JS by using content(data-attrib) in the CSS
rule. I was not away that the content() rule allowed you to query other
attributes on any matched tags and use them like variables

------
bosdev
If anyone would like to try a live preview on their site, I wrapped hint.css
in a quick Eager app: [http://bit.ly/202YkC5](http://bit.ly/202YkC5)

~~~
chinchang
So coool! Thanks.

------
tkinom
Is there any demo of adding hint to <a href....>..</a>? In desktop browser, I
can see the hover events can trigger the hints.

How to make it work on touch browser? Touch should trigger the <a href>, but I
also like to see hints shows up somehow.

------
z3t4
The tooltip should change position if it's rendered outside the visible area!

------
esailija
Tooltips that flicker as you move mouse on the page feel really cheap. If you
look at native tooltips, there is delay that waits for your mouse to "settle"
to show the tooltip so that it doesn't flicker.

~~~
chinchang
Hint.css also has a delay before showing/hiding. It can be tweaked as per
requirement.

------
steveax
There's also a fork that allows HTML content:

[https://github.com/istarkov/html-hint](https://github.com/istarkov/html-hint)

------
starikovs
Beautiful and works great! But I prefer to use stadard (alt,title) HTML
tooltip :)

------
balls187
hint--bounce doesn't seem to work properly on Firefox 43.0.4 for OS X (El
Capitan).

------
id
Don't we already have a title (or alt) attribute for <a>, <img>, <abbr> and
other HTML elements?

~~~
ldjb
The title attribute does provide a mouseover tooltip, but for users who are
not using a mouse (e.g. they are browsing the web on their phone), there is
often no reasonable way to access the title text. For example, as far as I'm
aware, iOS Safari will only show title text for images. I see this as
primarily an issue with the browser, but until Apple and others implement such
functionality into their browsers, it's up to the web developer to ensure
those users are able to access the title text.

------
eximius
uh. On mobile the grid is flipped?

------
StripeNoGood
"Made with hands by Kushagra Gour in India" \- I like this guy, compared to
all those "Made with Love" fuck you!

------
vog
I wonder why all those demo-sites include JavaScript. Doesn't this contradict
their purpose of demonstrating a pure-CSS library?

~~~
dangrossman
Using Google Analytics to measure traffic does not contradict the purpose of
demonstrating their tooltip library.

