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

tooltipster wiggles/shakes when opened on ajax content #795

Open
sderrick opened this issue Feb 13, 2020 · 4 comments
Open

tooltipster wiggles/shakes when opened on ajax content #795

sderrick opened this issue Feb 13, 2020 · 4 comments

Comments

@sderrick
Copy link

sderrick commented Feb 13, 2020

I have static tootips that open with the specified 'grow' animation, but the tips that get there content through an ajax call wiggle/shake on the first load. then they open normally.

all the tips have animation set -- animation: 'grow',

The content is loaded successfully and looks fine.

Is there a way to stop the wiggle?

here is the init code

$('a.personRef').each(function () {
$(this).tooltipster({
theme: 'tooltipster-light',
contentAsHTML: true,
maxWidth: 500,
trigger: 'custom',
side: 'bottom',
animation: 'grow',
interactive: true,
contentCloning: true,
content: 'Loading...',
triggerOpen: {
click: true,
touchstart: true
},
triggerClose: {
click: true,
scroll: true,
tap: true
},
functionBefore: function (instance, helper) {
var $origin = $(helper.origin);
// we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
if ($origin.data('loaded') !== true) {
$. get ($origin.attr('href'), function (data) {
// Append the parsed HTML of the retrieved page to a dummy


var elements = $("
").append($.parseHTML(data)).find('div.personBlock');
instance.content(elements);
var tip = instance.content();
$(tip).find('div.personPage img').imagesLoaded().done(function (instance) {
$origin.tooltipster('reposition');
initSecondaryFlex($(tip).find('div.personPage div.refImage'));
});
$(tip).find('div.personPageReduced img').on('load', function (event) {
if ($(tip).find('div.personPageReduced img') && ($(tip).find('div.personPageReduced .flexslider').length < 1)) {
var cwidth = event.target.clientWidth;
var cheight = event.target.clientHeight;
if(cwidth > 250) {
var ratio = 250/cwidth;
var rHeight = ratio * cheight;
$(tip).find('div.personPageReduced div.refImage').css("height", 20+rHeight+'px');
$(tip).find('div.personPageReduced div.refImage').css("width", '250px');
}
else {
$(tip).find('div.personPageReduced div.refImage').css("height", cheight+'px');
$(tip).find('div.personPageReduced div.refImage').css("width", cwidth+'px');
}
$(tip).find('div.personPageReduced div.refImage').css('margin-bottom', '2em');
}
initSecondaryFlex($(tip).find('div.personPageReduced div.refImage'));
$origin.tooltipster('reposition');
});
// to remember that the data has been loaded
$origin.data('loaded', true);
});
}
}
});
});

@sderrick
Copy link
Author

I set the animationDuration:0;
And annoying wiggle went away, but now the cool animation:grow; doesn't work.
Is there a better way?

@louisameline
Copy link
Collaborator

louisameline commented Feb 16, 2020

Hello, does the updateAnimation option work for you? It should work if you set it to null I think.

@sderrick
Copy link
Author

animation:'grow',
updateAnimation:null,

Gets me half there! I now don't get the shakes(which I now know is 'rotate') on a tip that loads via an ajax call, but I don't get any animation on the first click, rotate or grow. After that closing and opening I get the requested animation. thanks, Scott

@notonlybutalso
Copy link

animation : 'fade',
updateAnimation: 'fade',

There we go, all sorted!

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

3 participants