shipshapecode
(Feature Request) Make 'together' more intelligent
This is my use-case
I develop an app that should work on both desktops and mobiles. On desktops, I will have some medium sized tooltips. My tooltips will all be displayed above the target, like a speech bubble (i.e. drop.options.position = 'top center') and they should flip to the bottom when there is not enough space to be displayed above the target (i.e. tetherOptions.constraints=[{to: 'window', attachment: 'together'}] ).
Now, let's say I would like to target an "info" icon, for example. Let's further assume that my medium sized tooltip expands to a height of, let's say 400px. On desktops, everything works fine (the tooltip is not too large for desktops).
The thing gets tricky as soon as the tooltip is taller than half the viewport height:
Now, when viewing the same page on a mobile device (e.g. nexus 5 which has a height of 598px, see http://viewportsizes.com/?filter=nexus%205) I might have my info icon positioned in the middle of the screen (because I scrolled there). That leaves roughly 300px above and 300px below the info icon. This means, that the tooltip can neither fit above, nor below the target (and pinning is assumed not to be an option here, see footnote 1).
Right now, the constraint module will flip the attachments, see line 95. But afterwards, it will flip them back once more, see line 109
While this does not make much difference in case the info icon is positioned in the middle of the screen, the difference will be more apparent if you consider the info icon was positioned at top: 40%. While still not able to fit either above or below the target, there is much more space below the target and I'd say, the constraint module should be able to recognize this.
Unfortunately, it is not as easy as switching the if in line 109 into an else if. This is, because when we once more mentally change the position of the info icon to top: 60%, we now would approve of the tooltip being shown above the target (as there is more space).
Therefore: The constraint module should be able to apply additional logic in cases where both positions (the original and the flipped one) result in the target being out-of-bounds. It should be able to determine which side is better, i.e. which side will have more of the tethered element being displayed on the viewport. The benefits are obvious but I'd like to repeat them here, nonetheless:
- The tooltip will be positioned in such a way, that more of it is visible at a first glance.
- At the same time, the user will have to scroll less in order to see the parts that did not make it onto the viewport
footnote 1 pinning is not suitable, because as soon as the tooltip is taller than the viewport we easily run into at least one of two problems:
- We're not able to read the whole tooltip content.
- if we further assume, that the width of the tooltip covers the viewport width, it then effectively covers the whole screen and leaves no 'non-tooltip' area that could be touched to close the tooltip.
Very thoroughly written issue - thanks! :) I agree this should be high on the priority list.
Popper.js (https://github.com/FezVrasta/popper.js) has this functionality. I'd welcome a PR to add similar logic to Tether.
