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，以使插件更具可修饰性......但到目前为止插件没有给我带来文字=（

此外，它并未将工具提示完全置于用户选择的单选按钮之上。

如果你能帮助我，我会非常优雅!!!

这是小提琴：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/

Jquery Tooltip插件

1 个答案: