Не получается привязать Tooltip к перемещениям мыши(

  • Автор темы Malishka84
  • Дата начала
M

Malishka84

#1
Здравствуйте! Помогите пожалуйста.
Уже перепробовала все. что можно :rolleyes:
<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">"Посмотреть код"</div></div><div class="sp-body"><div class="sp-content">var QlueTip = new Class({
initialize: function( element, content, options ){
// Set the default settings, overwriten if specified in the qluetip syntax
this.setOptions({
transition: Fx.Transitions.linear,
Class: 'qTip',
qTipStyle: 'default',
TipPos: 'cursor',
width: 300,
duration: 150,
sticky: 0,
wait: false
}, options );

// Set open to false by default
this.open = false;
// Set toggle to the id of the item hovering over for QTip to appear
this.toggle = $(element);
// Set the style for the toggle
this.toggle.setStyles( this.toggleStyles() );

// Create the QTip element and add into the body
this.QTip = new Element( 'div', {
// Set the QTip class to 'default' unless specified
'class': this.options.Class,
'styles': {
'position': 'absolute',
'z-index': 999,
'top': 0,
'left': 0,
'visibility': 'hidden',
'width': 0
}
}).injectTop( document.body );

// Create another QTip div and add into the QTip element
this.QTip_class = new Element( 'div', {
'class': this.options.qTipStyle
}).injectInside(this.QTip);

this.QTip_tl = new Element( 'div', {
'class': 'QTip-tl',
'styles': {
'width':this.options.width
}
}).injectInside(this.QTip_class);

this.QTip_tr = new Element( 'div', {
'class': 'QTip-tr'
}).injectInside(this.QTip_tl);

this.QTip_t = new Element( 'div', {
'class': 'QTip-t',
'styles': {
'height':15
}
}).injectInside(this.QTip_tr);

this.QTip_l = new Element( 'div', {
'class': 'QTip-l',
'styles': {
'width': this.options.width
}
}).injectAfter(this.QTip_tl);

this.QTip_r = new Element( 'div', {
'class': 'QTip-r'
}).injectInside(this.QTip_l);

this.QTip_m = new Element( 'div', {
'class': 'QTip-content'
}).injectInside(this.QTip_r).setHTML(content);

this.QTip_bl = new Element( 'div', {
'class': 'QTip-bl',
'styles': {
'width': this.options.width
}
}).injectAfter(this.QTip_l);

this.QTip_br = new Element( 'div', {
'class': 'QTip-br'
}).injectInside(this.QTip_bl);

this.QTip_b = new Element( 'div', {
'class': 'QTip-b'
}).injectInside(this.QTip_br);

this.QTip_arrow = new Element( 'div', {
'class': 'QTip-arrow',
'styles': {
'height': 36
}
}).injectInside(this.QTip_B);

// If the option 'Sticky' is set to 1, insert this div for a close button
if( this.options.sticky ){
this.close = new Element( 'div', {
'class': 'QTip-close'
}).injectInside(this.QTip_tl);
}

// Create the tooltip effect
this.fx = new Fx.Styles( this.QTip, this.options );
// Add the event mouseenter to the element this tooltip is applied to
this.toggle.addEvent( 'mouseenter', this.show.bindWithEvent(this) );

if(this.options.sticky){
// Click to close the tooltip if sticky is set
this.close.addEvent( 'click', this.hide.bindWithEvent(this) );
} else {
// Close tooltip by removing mouse from the tooltip text
this.toggle.addEvent( 'mouseleave', this.hide.bindWithEvent(this) )
}
},

show: function( event ){

// If it is not open, fade in the tooltip and set this.open to true
if(!this.open){
// Get the coordinates of the mouse
this.coord = this.position( event );
// Set the style to the tooltip
this.QTip.setStyles({
'opacity': 0,
'top': this.coord.top +'px',
'left': this.coord.left +'px',
'width': 0,
'visiblity': 'visible',
'overflow': 'hidden',
});

// Start the fade in effect
this.fx.start({
'opacity': 1,
'top': (this.coord.top -10) +'px',
'width': this.options.width
});

// After faded in set this.open to true
this.open = true;
}
},

hide: function( event ){

// Start the fade out effect then set this.open to false
this.fx.start({
'opacity': 0,
'top': (this.coord.top +10) +'px',
});

this.open = false;

},

position: function( event ){

// Get the coordinates of the mouse
var obj = this.toggle.getCoordinates();
// Get the coordinates of the tooltip
var qtip = this.QTip.getCoordinates();

// If tip position is set to 'cursor' change the tooltip relative to the cursor
if( this.options.TipPos == 'cursor' ){
var event = new Event(event);
obj = $extend( obj, {
'top': event.page.y,
'left': event.page.x,
});
}

return {
'top': obj.top - (qtip.height),
'left': obj.left - (this.options.width/2) + (obj.width/2)
}
},

toggleStyles: function(){

var styles = {'display': 'inline'};

if(!this.toggle.getFirst() )return styles;

var first = this.toggle.getFirst().getCoordinates();

return $extend(styles, {
'width': first.width
});

}

});

QlueTip.implement(new Options);

Я подозреваю, что собака зарыта где-то в этом месте:

<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">"Часть кода"</div></div><div class="sp-body"><div class="sp-content">position: function( event ){

// Get the coordinates of the mouse
var obj = this.toggle.getCoordinates();
// Get the coordinates of the tooltip
var qtip = this.QTip.getCoordinates();

// If tip position is set to 'cursor' change the tooltip relative to the cursor
if( this.options.TipPos == 'cursor' ){
var event = new Event(event);
obj = $extend( obj, {
'top': event.page.y,
'left': event.page.x,
});
}

return {
'top': obj.top - (qtip.height),
'left': obj.left - (this.options.width/2) + (obj.width/2)
}
},

toggleStyles: function(){

var styles = {'display': 'inline'};

if(!this.toggle.getFirst() )return styles;

var first = this.toggle.getFirst().getCoordinates();

return $extend(styles, {
'width': first.width
});

}