chinchang / hint.css

A CSS only tooltip library for your lovely websites.

Home Page:https://kushagra.dev/lab/hint/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hidden hint makes website wider

dvorapa opened this issue · comments

Website is wider and therefore (especially on small screens) there is a white strip and horizontal scrollbar. See screenshot below
image

I am also seeing this error and it is super annoying

Since this is happening because of the tooltip going beyond the website boundaries, there are following solutions I can think of:

  1. Quick fix - Choose another tooltip position such that it doesn't extends in the direction (right & bottom) where its increasing the website dimensions.
  2. Quick fix - Limit body to max 100vw assuming it never scrolls horizontally. And then you can use overflow:hidden to not let anything. Note that this will crop the tooltip though.
  3. Better fix - Hint.css could have media query classes that allow you to position tooltips in a certain way on a certain screen size. This is essentially supporting the above mentioned solution 1 within the library in a more proper way. (there is also a PR in this context)