Show HN: Hint.css v2.0 – Pure CSS tooltip library
kushagragour.in
Show HN: Hint.css v2.0 – Pure CSS tooltip library
1–10 of 64 posts
Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library
#2On 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.
Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library
#3On 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.
yes, but only when i zoom in/out
Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library
#4Good work!
> "Works in all modern browsers."
It'd be really helpful if you listed which browsers it's been tested to work in.
Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library
#5On 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.
No such on gap my Chrome, it works great. (v48.0.2564.97, Mac OS X 10.11.3)
Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library
#6An 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
Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library
#7For 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!
Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library
#8How 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.
Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library
#9How 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.
Not 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: http://tink.uk/accessibility-support-for-css-generated-conte...
Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library
#10Good work! > "Works in all modern browsers." It'd be really helpful if you listed which browsers it's been tested to work in.
I think it is IE9+, as I understand from here: http://caniuse.com/#feat=css-gencontent