Javascript工具提示懸停並點擊

Question

我需要一些關於javascript工具提示的幫助。我下面的代碼在懸停時效果很好，但我不能將該函數放在外面，因此可以通過單擊來調用它。在函數中，只有計算工具提示位置和顯示方式的東西，並且工作正常。

非常感謝您的幫助。

var targets = $('[rel~=tooltip]'), 
    target = false, 
    tooltip = false, 
    title = false; 

targets.on('mouseenter', function() 
{ 
    target = $(this); 
    tip  = target.attr('title'); 
    tooltip = $('<div id="tooltip"></div>'); 



    if(!tip) { 
     return false; 
    } 

    target.removeAttr('title'); 
    tooltip.css('opacity', 0) 
      .html(tip) 
      .appendTo('body'); 

    var init_tooltip = function() 
    { 
     containerList = $('.container').find('.listImages'); 

     if(containerList.width() < tooltip.outerWidth() * 1.5) 
      tooltip.css('max-width', containerList.width()/2); 
     else 
      tooltip.css('max-width', 340); 

     var pos_left = target.offset().left + (target.outerWidth()/2) - (tooltip.outerWidth()/2), 
      pos_top = target.offset().top + target.outerHeight(), 
      pos_right = target.offset().right + (target.outerWidth()/2) - (tooltip.outerWidth()/2); 

      console.log(pos_right) 

     if(pos_left < containerList.offset().left) 
     { 
      pos_left = target.offset().left; 
      tooltip.addClass('left'); 
     } 
     else { 
      tooltip.removeClass('left'); 
     } 

     if(pos_left + tooltip.outerWidth() > containerList.offset().left + containerList.width()) 
     { 
      pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth(); 
      tooltip.addClass('right'); 
     } 
     else { 
      tooltip.removeClass('right'); 
     } 


     if(pos_top < 0) 
     { 
      var pos_top = target.offset().top + target.outerHeight(); 
      tooltip.addClass('top'); 
     } 
     else { 
      tooltip.removeClass('top'); 
     } 

     tooltip.css({ left: pos_left, top: pos_top }) 
       .animate({ top: '+=10', opacity: 1 }, 50); 
    }; 

    init_tooltip(); 
    $(window).resize(init_tooltip); 

    var remove_tooltip = function() 
    { 
     tooltip.animate({ top: '-=10', opacity: 0 }, 50, function() 
     { 
      $(this).remove(); 
     }); 

     target.attr('title', tip); 
    }; 



    target.bind('mouseleave', remove_tooltip); 

}); 

Answer 1

我創建了一個小提琴基於關閉你在你的問題提供什麼樣的：http://jsfiddle.net/R26Ba/1/

但是，因爲我並沒有完全實現你的頁面是基於比實際是內可用更理論小提琴。

基本上我所做的是創建一個工具提示對象：

function Tooltip(el) { 
    //... 
} 

其中有原型方法create，position，並destroy。然後創建自定義綁定，基於mouseevents創建和銷燬工具提示：

$('[rel~=tooltip][title]').on({ 
    'tooltip.create': function() { 
     $(this).trigger('tooltip.destroy'); 

     activeTooltip = new Tooltip(this); 
    }, 
    'tooltip.destroy': function() { 
     if(activeTooltip) { 
      activeTooltip.destroy(); 
     } 
    }, 
    'mouseenter': function() { 
     $(this).trigger('tooltip.create'); 
    }, 
    'mouseleave': function() { 
     $(this).trigger('tooltip.destroy'); 
    }, 
    'click': function(e) { 
     e.stopPropagation(); 

     if(activeTooltip && activeTooltip.el == this) { 
      $(this).trigger('tooltip.destroy'); 
     } else { 
      $(this).trigger('tooltip.create'); 
     } 
    } 
}); 

$(document.body).on('click', function() { 
    if(activeToolTip) { 
     activeTooltip.destroy(); 
    } 
}); 

$(window).on('resize', function() { 
    if(activeTooltip) { 
     activeTooltip.position(); 
    } 
}); 

此外，一個側面說明：您可能注意到，我清理了很多outerWidth/Height和offset電話。這些功能可能非常昂貴（性能明智），所以你真的想要留意你必須使用它們的次數。

附註2：您可能還想使用jQuery的resizeEnd事件插件。這將節制撥打position方法的電話數量，並提高整體性能。

附註3：我現在在笑自己，因爲我去了這方面的努力，然後才意識到......你打算如何元素點擊不導致mouseenter事件觸發？

Answer 2

如果你想重用你的init_tooltip函數，你可以在mouseenter事件之外聲明它，傳遞兩個參數：target和tooltip。

的init_tooltip函數的定義是這樣的：

var init_tooltip = function(target, tooltip) 

然後在你的MouseEnter事件，你會：

init_tooltip(target, tooltip); 
$(window).resize(function() { init_tooltip(target, tooltip); }); 

這樣的話，你可以用它爲Click事件處理程序好吧，像這樣：

targets.on('click', function() { 
    tooltip = $('<div id="tooltip"></div>'); 
    init_tooltip($(this), tooltip); 
}); 

你可能需要在cl中重現你的邏輯ick事件來確定它是否應顯示或隱藏工具提示。

Answer 3

這就是我可以做的那一刻，但又有一個問題，點擊和mouseleave。我改進了代碼，但這並不完美。

$("body").append('<div id="tooltip"></div>'); 

var activeTooltip = null, 
    $tooltip = $('#tooltip'), 
    $containerList = $('#content .listImages'); 

function Tooltip(el) { 
    this.el = el; 
    this.$el = $(el); 
    this.text = this.$el.attr('data-content'); 

    this.create(); 
} 

$.extend(Tooltip.prototype, { 
    'create': function() { 
     this.$el.removeAttr('data-content'); 

     $tooltip.css({ 
      'opacity': 0 
     }).text(this.text); 

     this.position(); 
    }, 
     'position': function() { 
     var conWidth = $containerList.width(), 
      conOffset = $containerList.offset(), 
      toolWidth = $tooltip.outerWidth(); 

     if (conWidth < $tooltip.outerWidth() * 1.5) { 
      $tooltip.css('max-width', conWidth/2); 
     } else { 
      $tooltip.css('max-width', 340); 
     } 

     var elOffset = this.$el.offset(), 
      elWidth = this.$el.outerWidth(), 
      elHeight = this.$el.outerHeight(), 
      pos_left = elOffset.left + (elWidth/2) - (toolWidth/2), 
      pos_top = elOffset.top + elHeight; 

     if (this.$el.offset().left + (elWidth/2) - ($tooltip.outerWidth()/2) < conOffset.left) { 
      pos_left = this.$el.offset().left; 

      $tooltip.addClass('left'); 
     } else { 
      $tooltip.removeClass('left'); 
     } 

     if (elOffset.left + (this.$el.outerWidth()/2) - ($tooltip.outerWidth()/2) + $tooltip.outerWidth() > $containerList.offset().left + $containerList.width()) { 
      pos_left = this.$el.offset().left - $tooltip.outerWidth() + this.$el.outerWidth(); 
      $tooltip.addClass('right'); 
     } else { 
      $tooltip.removeClass('right'); 
     } 

     if (elOffset.top + this.$el.outerHeight() < 0) { 
      pos_top = elOffset.top + this.$el.outerHeight(); 

      $tooltip.addClass('top'); 
     } else { 
      $tooltip.removeClass('top'); 
     } 

     $tooltip.css({ 
      'left': pos_left, 
      'top': pos_top 
     }) 
      .animate({ 
      'top': '+=10', 
      'opacity': 1 
     }, 50); 
    }, 
     'destroy': function() { 
     $tooltip.animate({ 
      'top': '-=10', 
      'opacity': 0 
     }, 50); 

     this.$el.attr('data-content', this.text); 

     activeTooltip = null; 
    } 
}); 

var savelastTooltip, activeSaveTooltip = false; 

$('[rel~=tooltip][data-content]').on({ 
    'tooltip.create': function() { 
     $(this).trigger('tooltip.destroy'); 
     activeTooltip = new Tooltip(this); 
    }, 
    'tooltip.destroy': function() { 
     if (activeTooltip) { 
      activeTooltip.destroy(); 
     } 
    }, 
    'mouseenter': function() { 
     $(this).trigger('tooltip.create'); 
    }, 
    'mouseleave': function() { 
     $(this).trigger('tooltip.destroy'); 
     if(true === activeSaveTooltip) 
     { 
      activeTooltip = new Tooltip(savelastTooltip); 
     } 
    }, 
    'click': function (e) { 
     e.stopPropagation(); 
     activeSaveTooltip = true; 
     savelastTooltip = this; 

     if (activeTooltip && activeTooltip.el != this) { 
      $(this).trigger('tooltip.destroy'); 
     } else if(activeTooltip && activeTooltip.el == this) { 
      $(this).off('mouseleave'); 
     } else { 
      $(this).trigger('tooltip.create'); 
     } 
    } 
}); 

$(window).on('resize', function() { 
    if (activeTooltip) { 
     activeTooltip.position(); 
    } 
});