Tips has a number of problems. I wrote another Tooltips class for me
and it works just well. It's very basic, but simple. So you can expand
it quite easily. Feel free to use it.
*******
var Tooltips = new Class({
Implements:[Options,Events],
options:{
className:'tip-box',
offset: {x: 16, y: 16}
},
//id is intended just as 'identifier', not html id, so it can be
anything, a class or so
initialize: function(id,options){
this.setOptions(options);
this.id = id;
this.elements = [];
this.initElements();
},//end init
initElements:function(){
this.elements = $$(this.id);
this.elements.each(function(elem,index){
this.buildTip(elem);
},this);
this.elements.addEvents({
'mouseover':function(e){
var t=($(e.target).match('a')) ? $(e.target) : $
(e.target).getParent('a');
this.showTip(t.retrieve('tip'));
t.addEvent('mousemove',this.mouseTrack.bindWithEvent(this));
}.bindWithEvent(this),
'mouseout':function(e){
var t=($(e.target).match('a')) ? $(e.target) : $
(e.target).getParent('a');
this.hideTip(t.retrieve('tip'));
t.removeEvent('mousemove',this.mouseTrack.bindWithEvent(this));
}.bindWithEvent(this)
});
},
buildTip:function(element){
var tip = new Element('div',{
'class':this.options.className,
'styles':{
'display':'none',
'position':'absolute'
}
});
var tipTop = new Element('div',{ 'class':'tip-top' });
var tipBody = new Element('div',{ 'class':'tip-body' });
var tipContent = new Element('div',{ 'class':'tip-content' });
var tipBottom = new Element('div',{ 'class':'tip-bottom' });
tipContent.set('html',element.get('title'));
element.removeProperty('title');
tipBody.adopt(tipContent);
tip.adopt([tipTop, tipBody, tipBottom]);
tip.inject(document.body);
element.store('tip',tip);
//todo: add effects
},
mouseTrack:function(e){
var t=($(e.target).match('a')) ? $(e.target) : $
(e.target).getParent('a');
var tip = t.retrieve('tip');
tip.setStyles({
'left':e.page.x+this.options.offset.x,'top':e.page.y
+this.options.offset.y, });
},
showTip:function(tip){
if(tip.getStyle('display') == 'none')
{ tip.setStyle('display','block') }
},
hideTip:function(tip){
if(tip.getStyle('display') == 'block')
{ tip.setStyle('display','none') }
}
});
window.addEvent('domready',function(){
var tips = new Tooltips('.thumb-tip');
});
*******
On 3 Mag, 14:22, hamburger <[email protected]> wrote:
> Hello in my code the function
> Hints.detach(li_element);
> destroys the detached element (here:li_element) not the Hints.
>
> is this the way of meaning?
>
> How to destroy the showed Tip-element?
>
> my code:
> var li_element = new Element('li', {
> 'id': bildID,
> 'class': 'complain',
> 'html': complaintext + '<br /><span
> class="time">I do not
> want this ...</span>'
> }).adopt(
> new Element('img', {
> 'class': 'complain-remove',
> src:
> 'images/investor_close.gif',
> title: 'click to remove.',
> events: {
> click: function() {
>
> Hints.detach(li_element); //Tip
> delete
> li_element.dispose();
> }
> }
> })
> ).inject('complainContainer','top');
>
> and for tips:
>
> var Hints = new Tips({
> showDelay: 100,
> hideDelay: 10,
> offset: {
> 'x': -60,
> 'y': -130
> },
> fixed: true,
> className: 'david_tip',
> onShow: function(tip,el) {
> tip.fade('in');
> },
> onHide: function(tip,el) {
> tip.fade('out');
> },
> onDetach:function(tip,el) {
> alert("detached");
> //tip.fade('out'); //something wrong here
> //tip.setStyle('display', 'none');
> }
> });
