Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

kushagragour.in

Post reply on HN
Print view View original

11–20 of 64 posts

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

#11

Post by laumars »

porker wrote: post #4

Good work! > "Works in all modern browsers." It'd be really helpful if you listed which browsers it's been tested to work in.

They 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 + transition effects
   * Firefox - basic + transition effects
   * Opera - basic
   * Safari - basic
   * IE 10+ - basic + transition effects
   * IE 8 & 9 - basic"
[1] https://github.com/chinchang/hint.css#browser-support

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

#12

Post by robin_reala »

patates wrote: post #10
porker wrote: post #4

Good 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

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

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

#15

Post by kdamken »

10dpd wrote: 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.

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.

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

#17

Post by oneeyedpigeon »

kdamken wrote: post #15
10dpd wrote: 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.

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.

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.

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

#18

Post by wodenokoto »

10dpd wrote: 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.

Isn't there a tag for links similar to the description tag for images? If so, you could just enter the tooltip there as well.

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

#19

Post by th0br0 »

ryannevius wrote: post #2

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.

It's not really a bug. Just that the rectangle border overlays the triangle.

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

#20

Post by chinchang »

ohitsdom wrote: post #13

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)
Post reply on HN