calebjacob / tooltipster

A jQuery tooltip plugin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

tooltipster wiggles/shakes when opened on ajax content

sderrick opened this issue · comments

commented

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);
});
}
}
});
});

commented

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

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

commented

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

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

There we go, all sorted!