Tooltipster dimensions sometimes wrong

[pavel-j]

When tooltipster is used with ajax loaded data (functionBefore as in example),
tooltip is sometimes displayed wrong:

• tooltip height and width are smaller than they should be, vertical scrollbar appears
• this is due width and height set in style attribute by tooltipster (to wrong value)
• on mobile safari (ipad) vertical scrollbar does not show, but tooltip contents overflows over bottom of tooltip box

it appears wrong in about 10% of cases (consistently in our project), css width/height is not recalculated
on content update in such cases. it may be colliding with grow animation - without any animation, it works fine.

options:

minWidth: 200,
maxWidth: 400,
animation: 'grow',
delay: 0,
animationDuration: 150,

sorry that i'm unable to provide public accessible working example

[louisameline]

Hi,

AFAIK css transitions are not supposed to change anything from the javascript point of view, if they do then I'd suspect a browser issue. And when Tooltipster measures the content, it's a clone which is not supposed to be animated anyway. Does the bug occur with other transitions? Does it occur when you don't set minWidth and maxWidth ?

By any chance, does your content hold images? If yes, then take a look at http://iamceege.github.io/tooltipster/#faq_sizeissue

Not sure that I'll be able to help more without a a working example, I can't try to replicate something out of the blue.

[pavel-j]

Hello,

thank you very much, for such fast response. Tooltipster is great :-)

Because I met some weirdness while verifying your questions (I met another problem with transition - more info bellow), I prepared isolated example for you:
https://www.eqis-online.eu/test/tooltipster-master/test.html

It is fresh tooltipster (just downloaded), with example based on from http://iamceege.github.io/tooltipster/#ajax
(and one non-ajax tooltip example for comparison)

You can see following weird behavior (Google Chrome 52 on Win 10):

ajax loaded tooltip, on first mouseover

• shows with wrong dimensions, scrollbars inside content area (it happens always for me, in this isolated case - in production project, it was just 'sometimes')
• shows with swing transition (which is incorrect, in 'grow' is in options). this may be interesting

subsequent mouseover on the same tooltip displays everything correctly (correct dimensions, currect grow transition, no scrollbar)

normal (no ajax) tooltip is OK too (including animation).

---

as response to previous questions - minWidth/maxWidth had no effect, content does not hold images (simple spans/paragraphs of word-breakable text)

[louisameline]

Thank you for the example and compliments :) I can see it happen when the animation is grow or slide (haven't tried the others, except the default fade that works fine). I'm going to debug this shortly.

As for the swing animation, it's actually the updateAnimation that you see because you call the content method, so it would be expected.

[haschdl]

Same erratic behavior here. In my case the tooltip is triggered a couple of seconds after $.ready
I wasn't able to isolate the cause, sometimes it loads correctly, sometime with scrollbar. I wasn't aware of this issue when I asked in SO: http://stackoverflow.com/questions/39291733/javascript-tooltip-unexpected-text-wrapping-tooltipster/39291952#39291952

Note: Calling or no AnimateUpDown didn't make a difference.

   function AnimateUpDown(toolTipElement) {
        $(toolTipElement).animate({ top: '+=20' }, 1000);
        $(toolTipElement).animate({ top: '-=20' }, 1000, AnimateUpDown);
    }
    $(document).ready(function () {
        $('.tooltipjs')
            .tooltipster(
            {
                animation: 'grow',
                arrow: false,
                //Custom trigger effectively disables the default onhover trigger
                trigger: 'custom',
                functionReady: function (instance, helper) {
                    AnimateUpDown(helper.tooltip);
                }
            });
        toolTipOpenAndClose();
    });

HTML:
`

` This is how it looks: 

[louisameline]

I'll do this shortly, it probably shouldn't take long. Please use the fade animation in the meantime.

[louisameline]

Should be fixed now in 4.1.5. Thank you.

[pavel-j]

Thank you very much