calebjacob / tooltipster

A jQuery tooltip plugin
MIT License
2.76k stars 482 forks source link

Not able to resize the tooltip properly when resizing the browser window #821

Open sunsande opened 2 years ago

sunsande commented 2 years ago

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!