jQuery - 功能設置

Question

我目前有一個問題，調整此工具提示插件。

(function($) { 
    $.fn.toolTip = function() { 
     $(this).hover(function() { 
      tip = $('.userRank'); 
      tip.show(); 
     }, function() { 
      tip.delay(2000).fadeOut('fast'); 
     }).mousemove(function(e) { 
      var mousex = e.pageX - 32; 
      var mousey = e.pageY - 86; 
      var tipWidth = tip.width(); 
      var tipHeight = tip.height(); 
      var tipVisX = $(window).width() - (mousex + tipWidth); 
      var tipVisY = $(window).height() - (mousey + tipHeight); 
      if (tipVisX < 20) { 
       mousex = e.pageX - tipWidth - 20; 
      } 
      if (tipVisY < 20) { 
       mousey = e.pageY - tipHeight - 55; 
      } 
      tip.css({ top: mousey, left: mousex }).stop(); 
     }); 
    }; 
})(jQuery); 

，你可以看到我已經通過tip可變

tip = $('.userRank'); 

限定的尖端容器或元件是有可以通過設置或選項，使得其看起來像任選地選擇的元素的可能性這個。

$('.bidInput').toolTip('#socialIcons'); 

或

$('.bidInput').toolTip({tip : '#socialIcons'}); 

Answer 1

像這樣的事情可能會爲你工作：

// very simplified 
(function($) { 
    $.fn.toolTip = function(options) { 
     var settings = $.extend({ 
      'tip': '#defaultTip' 
     }, options); 

     alert(settings.tip); // for testing 
     var tip = $(settings.tip); 

     // the rest of your code 
    }; 
})(jQuery); 

$('.bidInput').toolTip({ tip: '#socialIcons' }); 

所以，如果你嘗試調用它像這樣：

$('.bidInput').toolTip(); 

然後你」我會注意到會使用'#defaultTip'。

---

編輯

此外，我創建了一個jsFiddle for you here。