jQuery的工具提示插件

Question

我很牛逼作爲這樣的jQuery插件，我開始對這個提示插件工作：

jQuery(function ($) { 
    $.fn.simpleMessageTtip = function (options) { 
     var settings = { 
      'messageTxt': 'The notification frequency has been updated', 
     }; 

     if (options) { 
      $.extend(settings, options); 
     } 

     var getTooltip = function() { 
      var tTip = 
       '<div class="simple-message-tooltip">' + 
        '<div class="message clearfix">' + 
         '</div>' + 
          '<div class="bubble-pointer-bottom"></div>' + 
           '</div>'; 
      return tTip; 
     }; 

     $("body").prepend(getTooltip()); 

     $(this).each(function() { 
      var $this = $(this); //the caller of the ttip 
      var tip = $('.simple-message-tooltip'); 
      var tipInner = $('.simple-message-tooltip .message'); 

      var setTip = function (top, left) { 
       var topOffset = tip.height(); 
       var xTip = (left - 50) + "px"; 
       var yTip = (top - topOffset - 40) + "px"; 
       tip.css({ 'top': yTip, 'left': xTip }); 
      }; 

      $this.click(function(){ 
       var offset = $(this).offset(); //Offset returns an object containing the properties top and left. 
       var tLeft = offset.left; 
       var tTop = offset.top; 

       tipInner.html(messageTxt); 
       setTip(tTop, tLeft); 
      }, 
       function() { 
        tip.fadeIn("fast"); 
        setTimeout(function(){ 
         tip.fadeOut("fast"); 
        }, 1000); 
       } 

      );  
     }); 

    }; 
} (jQuery)); 

由時刻排序工作（你可以說大聲笑）但也有一些問題。也許你請幫我找出原因？

這是當您單擊單選按鈕時出現的工具提示。

我的第一個問題是，我希望裏面的文本是一個SETTING，稍後可以更改該插件以使插件更具可maleable ...但是，插件沒有給我帶來文本=（

而且，它不把工具提示EXACTLY在單選按鈕的上方，用戶選擇

如果你能幫助我，我會大大優雅！

這是小提琴：http://jsfiddle.net/Vrfsx/9/

感謝所有！ =） OrangeJuice.-

Answer 1

你很接近它的工作。唯一需要改變的是你的click處理程序。以下內容：

$this.click(function(){ 
    var offset = $(this).offset(); //Offset returns an object containing the properties top and left. 
    var tLeft = offset.left; 
    var tTop = offset.top; 

    tipInner.html(messageTxt); 
    setTip(tTop, tLeft); 
}, 
function() { 
    tip.fadeIn("fast"); 
    setTimeout(function(){ 
    tip.fadeOut("fast"); 
    }, 1000); 
}); 

錯誤;第一個函數將永遠不會執行（由於click有兩個參數，最後一個是事件處理程序）的超載。所有你應該做的糾正，這是合併這兩個功能：

$this.click(function() { 
    var offset = $(this).offset(); 
    var tLeft = offset.left; 
    var tTop = offset.top; 

    tipInner.html(settings.messageTxt); 
    setTip(tTop, tLeft); 
    tip.fadeIn("fast"); 
    setTimeout(function() { 
     tip.fadeOut("fast"); 
    }, 1000); 
}); 

更新代碼：http://jsfiddle.net/Bky7F/