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

Тема в разделе "Java", создана пользователем Malishka84, 13 янв 2011.

  1. Malishka84

    Malishka84 Гость

    Здравствуйте! Помогите пожалуйста.
    Уже перепробовала все. что можно :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
    });

    }
     
Загрузка...

Поделиться этой страницей