Can anyone hеlp me with a tooltips animation with JQuery-ui?

Question

I need to make a custom animation for a tooltip from the JQuery-ui library, based on the input from a text field, but i have no idea how.(if the chosen name for the animation is 'myAnimation')
The position is determined by the value of the 'at' field. I can change the value using a function but the resulting change does not appear on the screen unless i move the cursor away first.
var modify={
show:{
effect:$('#effect').val(),
duration:300
},
position: {
my: "center bottom-20",
at: "left top"
}
}
$('#tooltip').hover(function(){

var efect=document.getElementById('effect').value;

if(efect!="myAnimation"){

modify.show.effect=efect;
$(this).tooltip(modify)
}else{
console.log(1)
$(this).tooltip(modify).animate({
position:{
at:"left+=50 top"
}
},1000,function(){})

}
},function(){

})

Answer 1

The resulting change will definitely appear when you move your cursor away because you have set it to hover,
('#tooltip').hover()

To make it visible when you click, change that hover to onclick event.