Live data from Hacker News

Show HN: Hint.css v2.0 – Pure CSS tooltip library

kushagragour.in

61–64 of 64 posts

Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library

#61
post #32
post #7

For those wondering, the main trick is here: https://github.com/chinchang/hint.css/blob/master/hint.css#L... 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

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?

I believe it's pretty solid: http://caniuse.com/#search=CSS%20Generated%20content%20for%2...

Also checkout the pseudo counter: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_a...

Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library

#62

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?

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)

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.

Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library

#63
post #8

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.

As soon as I see "pure CSS" or "CSS only" this is the first thing I think of. This meme that "pure CSS" is a Good Thing is a shame.
Post reply on HN