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:
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!
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:
The
availableWidth
correction is needed because the width of the tooltip is initially calculated from thetooltipster
to fit the viewport and if one moves the tooltip (viaposition.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 thetooltipster
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 usinginstance.__options.maxWidth = availableWidth
in thefunctionPosition
, 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!