Hint.css v2.0
Dev tools
css tooltip library
SHOW HN2016
253points
62comments
#92of 2,264 in 2016
Top 5%of 2016 by points
How HN took it
MixedNo clear lean
8 positive, 15 neutral or asking, 3 mixed, 15 critical, out of 41 comments about the project. Thread score -0.17.
Execution: 4 for, 5 againstDesign: 1 for, 7 againstPerformance: 2 for, 1 againstIdea: 0 for, 2 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Clever use of CSS attr() to build tooltips without JavaScript
From 3 comments
For those wondering, the main trick is here: https://github.com/chinchang/hint.css/blob/master/hint.css#L65 This creates a pseudo ":after" element with content set to the value…
sylvinus on HNAn 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…
billyhoffman on HNVery clever. I didn't know you could reference attributes in css.
ahoy on HN
Small file size, about 1.5KB minified and gzipped
From 3 comments
> Small file size. Only 1.5KB minified and gzipped! Well I guess everything is relative...
Smudge on HNIn the age of multi-megabyte webpages [1], 1.5KB is definitely small. [1] http://idlewords.com/talks/website_obesity.htm
oneeyedpigeon on HNCompared to previous (JS-heavy solutions), yes.
Cthulhu_ on HN
Objections
Not accessible to screen readers or keyboard users
From 3 comments
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.
10dpd on HNNot with keyboard interaction: they’d have to add :focus rules and tabindexes to the parent. Screen readers sometimes read out generated content. Léonie has more info:…
robin_reala on HNUnfortunately 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…
kdamken on HN
Tooltips may clip in overflow hidden containers and do not reposition near viewport edges
From 2 comments
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…
grumblestumble on HNThe tooltip should change position if it's rendered outside the visible area!
z3t4 on HN
Blurry text during scale animation and a gap at some zoom levels
From 3 comments
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…
ryannevius on HNWhat 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…
ohitsdom on HNI 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…
famfamfam on HN
Requests
Keyboard accessibility support
From 1 comment
Keyboard accessibility should arrive soon: https://github.com/chinchang/hint.css/pull/111
chinchang on HN
Use aria-label for accessibility
From 2 comments
To address the screen-reader concerns: As a proof of concept I was able to swap out `data-hint` for `aria-label` without issue:…
prezjordan on HNYeah, that should bring in some accessibility. Right now the library uses `data-hint` attribute. We could use `aria-label` attribute instead!
chinchang on HN
Touch device support
From 1 comment
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…
tkinom on HN
Questions
Which browsers are supported
From 3 comments
Good work! > "Works in all modern browsers." It'd be really helpful if you listed which browsers it's been tested to work in.
porker on HNI think it is IE9+, as I understand from here: http://caniuse.com/#feat=css-gencontent
patates on HNThey do on Github[1] "hint.css works on all latest browsers, though the transition effect is supported only on IE10+, Chrome 26+ and FF4+ at present. ``` * Chrome - basic +…
laumars on HN
How tooltips behave on touch devices
From 1 comment
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…
tkinom on HN
Alternatives named
bevacqua/hint
From 1 comment
Here's an alternative I wrote a long time ago: https://github.com/bevacqua/hint - Stylus or plain CSS - Comes with a bit of JavaScript ``` - Auto-docks to browser window edges -…
bevacqua on HN
html-hint fork allowing HTML content
From 1 comment
There's also a fork that allows HTML content: https://github.com/istarkov/html-hint
steveax on HN
Native title and alt attributes
From 1 comment
Don't we already have a title (or alt) attribute for <a>, <img>, <abbr> and other HTML elements?
id on HN