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

51–60 of 64 posts

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

#51

Post by eximius »

ToastyMallows wrote: post #24
nailer wrote: post #22

Earlier quoted context omitted.

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.

> "many users browse at non-100% zoom" This sounds dubious. Do you have a source for this?

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.

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

#52

Post by ww520 »

ToastyMallows wrote: post #24
nailer wrote: post #22

Earlier quoted context omitted.

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.

> "many users browse at non-100% zoom" This sounds dubious. Do you have a source for this?

Do you have a source to support many users browse at 100% zoom?

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

#53

Post by colmvp »

ww520 wrote: post #52
ToastyMallows wrote: post #24

Earlier quoted context omitted.

> "many users browse at non-100% zoom" This sounds dubious. Do you have a source for this?

Do you have a source to support many users browse at 100% zoom?

Based on discoverability of zoom and the effort cost of adjusting the zoom of every site, I'd bet a lot of money on the vast majority of users in the world browse at 100% zoom over all others setting solely on the basis that it's the default setting (or 'laziest setting') and not easily discoverable.

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

#54

Post by USAnum1 »

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.

I thought the small gap that appears at 125% zoom was quite nice looking, actually!

(After some messing around, it only appears at multiples of 75% zoom for me. I am using chrome 'Version 48.0.2564.97 m' on Windows with a 1080p screen.)

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

#55

Post by 91bananas »

nailer wrote: post #40
ToastyMallows wrote: post #24

Earlier quoted context omitted.

> "many users browse at non-100% zoom" This sounds dubious. Do you have a source for this?

> Do you have a source for this? I don't. However it seems odd to think people wouldn't zoom in a document viewer. Let's get some real numbers though: I just asked Addy Osmani on Twitter if there are stats for this, since window.devicePixelRatio changes with zoom.

Do 90% of web users know that this is a document viewer?

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

#57

Post by 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 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).

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

#58

Post by ahoy »

sylvinus wrote: 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

Very clever. I didn't know you could reference attributes in css.

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

#59

Post by mbrock »

eximius wrote: post #51
ToastyMallows wrote: post #24

Earlier quoted context omitted.

> "many users browse at non-100% zoom" This sounds dubious. Do you have a source for this?

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.

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.)

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

#60

Post by nailer »

91bananas wrote: post #55
nailer wrote: post #40

Earlier quoted context omitted.

> Do you have a source for this? I don't. However it seems odd to think people wouldn't zoom in a document viewer. Let's get some real numbers though: I just asked Addy Osmani on Twitter if there are stats for this, since window.devicePixelRatio changes with zoom.

Do 90% of web users know that this is a document viewer?

Yes. Most people on the internet have heard words like 'web page' before. Hopefully zooming awareness should on the same order of magnitude as scrolling awareness, although it's probably less since scrolling was implemented first.
Post reply on HN