Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sunsande opened this issue Nov 17, 2021 · 0 comments
Open

Comments

@sunsande
Copy link

sunsande commented Nov 17, 2021

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant