search

kazzkiq / balloon.css

Simple tooltips made of pure CSS
https://kazzkiq.github.io/balloon.css/
MIT License
5.03k stars 448 forks source link

bug/question(positioning): tooltips goes off a screen #153

Open Kristinita opened 3 years ago

Kristinita commented 3 years ago

#59 — related issue.

1. Summary

Balloon.css long tooltips can’t stay in a visible browser area especially on small mobile devices.

Balloon.css goes off screen

I couldn’t find how I can solve this problem.

It would be nice, if it would be possible even if some JavaScript — as in this example — will be required.

2. Argumentation

Users may not see the tooltip text.

I’m not going to use long messages for tooltips, but mobile devices won’t even fully display a short phrases as “This tooltip message isn’t very long”.

3. Not helped

3.1. up-left/up-right

Solution for #62 didn’t help in this case. Even for example text tooltip go to the screen.

up-right

3.2. data-balloon-length="fit"

When I hovered cursor over the small button the result of this option looks like this:

data-balloon-length="fit"

4. Other techniques where this problem doesn’t exist

4.1. title attribute

Native tooltip — via title attribute — stay in a visible browser area. But:

  1. The web developer can’t customize it
  2. Some user groups not well served

4.2. JavaScript plugins

Tooltipster and Tippy.js haven’t this problem. But:

  1. Tippy.js + Popper — 10.5 kB minzip
  2. Tooltipster + JQuery — 40 kB minzip

I think for not critical tasks like tooltips it would be nice to have smaller dependencies.

Thanks.

tlkiong commented 3 years ago

I faced this as well I think https://github.com/kazzkiq/balloon.css/issues/149 is related to this