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:
#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:4.2. JavaScript plugins
Tooltipster and Tippy.js haven’t this problem. But:
I think for not critical tasks like tooltips it would be nice to have smaller dependencies.
Thanks.