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

[Kristinita]

#59 — related issue.

1. Summary

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

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.

3.2. data-balloon-length="fit"

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

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]

I faced this as well
I think #149 is related to this