Description
I'm working on a website where the tooltips texts could be quite long.
Also one wants to display them starting from the above top left corner of the origin element.
I use the following positioning function:
functionPosition: function (instance, helper, position) {
position.coord.top -= 10
position.coord.left = helper.geo.origin.offset.left
var availableWidth = helper.geo.window.size.width - position.coord.left
position.size.width = availableWidth
return position;
}
The availableWidth
correction is needed because the width of the tooltip is initially calculated from the tooltipster
to fit the viewport and if one moves the tooltip (via position.coord.left = helper.geo.origin.offset.left
) and the tooltip's width is big enough, the tooltip will exceed the viewport to the right causing horizontal scroller to appear.
So in order to avoid the scroller I resize the tooltip, which works correct with the width.
The problem is then with the height. It stays unchanged and this causes vertical-scroller within the tooltip to appear.
How could one avoid that?
I tested with maxWidth
set initially and it works perfect - the size of the tooltip box is calculated so no scrollers appear (when possible, a.k.a the tooltip text is not too long).
So with one origin element I could calculate the availableWidth
with javascript bevorhand and then give its value to the tooltipster
constructor options.
This solution is not very convenient with more origin elements and it does not work at all when the user changes the viewport size (through resize for example. One could listen for resize and do the recalculation and re-instantiate all of the tooltips , but that would be an overkill)
The problem is one couldn't change the maxWidth
dynamically (as far as I know - I would be glad to be wrong on that :) ).
I tried to "hack" it using instance.__options.maxWidth = availableWidth
in the functionPosition
, but it didn't work.
Or put it another way - if one changes the width in functionPosition
the height won't be resized automatically to fit the content and there is no a function to force that (AFAIK).
Thanks for any help or other workarounds in advance!