Question

I am very newby as doing this jquery plugins and I started working on this tooltip plugin:

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

By the moment is sort of working (you could say lol) but with some problems. Maybe you please help me to find out why?

This is a tooltip that appears when you click on a radiobutton.

My first problem is that I would like the text inside to be a SETTING that can be changed later in order to make the plugin more maleable…But by the moment the plugin is not bringing me the text =(

Also, It is not bringing the tooltip EXACTLY on top of the radiobutton that the user selects.

If you could help me I will be greatly gracefully!!!

This is the fiddle: http://jsfiddle.net/Vrfsx/9/

THANKS IN ADVANCE ALL!! =)
OrangeJuice.-

Answer 1

You’re pretty close to having it working. The only thing you need to change is your click handler. The following:

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

Is incorrect; the first function will never be executed (due to an overload of click with two arguments, the last being an event handler) existing. All you should have to do to correct this is merge the two functions:

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

Updated code: http://jsfiddle.net/Bky7F/