hello list,
I am trying to make an animated tooltip.
The following works well enough, but
I think there must be a better way to do this.
I use the tip.fade('in'); and out, followed by a "this.fxopen = new
Fx.Morph(this.tip)"
however, if a tip is in morph transition when the users mouse
changes to a different link, the new tip object remains hidden.
To try and prevent this, I have added a second Fx.Morph(this.tip) to
close faster than opened.
The css is also bellow to show you the intended changes / or animation.
Thanx for any suggestions.
*** js code ****
var myTips = new Tips($$('.tool'), {
className:
'customTipClosed',
showDelay : 350,
hideDelay : 100,
offsets: {'x': -290,
'y': 0},
fixed: 'true',
initialize:function(){
this.fxopen = new
Fx.Morph(this.tip, {
duration: 750,
transition:
Fx.Transitions.Sine.easeInOut});
this.fxclose = new
Fx.Morph(this.tip, {
duration: 150,
transition:
Fx.Transitions.Sine.easeInOut});
},
onShow: function(tip) {
tip.fade('in');
this.fxopen.start('.customTip','.customTipClosed');
},
onHide: function(tip) {
tip.fade('out');
this.fxclose.start('.customTipClosed', '.customTip');
}
});
*** css ***
.customTip{
margin-left:0px;
margin-top:0px;
width: 280px;
overflow: hidden;
}
.customTipClosed{
margin-left:-60px;
margin-top:-60px;
width: 0px;
overflow: hidden;
}
----------
Daiv Mowbray
