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)); 

目前可以工作（你可以说哈哈），但有一些问题。也许你能帮我找出原因？

这是当您单击单选按钮时出现的工具提示。

我的第一个问题是，我希望里面的文本是一个可以稍后更改的设置，以便使插件更具可扩展性...但是目前插件没有给我带来文本=（

另外，它不是 之上，

如果您能帮助我，我将非常优雅！

将工具提示准确地放在用户选择的单选按钮 rel="nofollow">http://jsfiddle.net/Vrfsx/9/

提前感谢大家！！ =) 橙汁。-

Answer 1

你已经很接近让它发挥作用了。您唯一需要更改的是您的点击处理程序。以下内容：

$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/