Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I am currently working with my first plugin(ie..tooltip plugin)and here is my code:

    (function ($) {
    $.fn.Tipify = function (options) {
        /*setup default settings*/
        var defaults = {
            closeTipBtn: 'TipifyCloseBtn',
            toolTipId: 'Tipify',
            fixed: false,
            showButtons: false,
            tipContent: '',
            TipifyStyle: 'defaultTheme',
            xOffset: 15,
            yOffset: -25,
            onShow: null,
            onHide: null
        },settings = $.extend({}, defaults, options);

        return this.each(function () {
            var content = $(this);

            if (content.attr('title')) {
                var tipContent = content.attr('title');
            } else {
                var tipContent = settings.tipContent;
            }



            var buildTipify = function () {
                $('body').append("<div id='" + settings.toolTipId + "' class='" + settings.TipifyStyle + "'><p class='TipifyContent'>" + tipContent + "</p></div>");

                if (settings.showButtons == true) {
                    $('#' + settings.toolTipId + ' p.TipifyContent')
                    .append("<a id='" + settings.closeTipBtn + "' href='#' alt='close'>close</a>");
                }
            },

            positionTipify = function () {
                $('#' + settings.toolTipId).css({
                    top: (content.offset().top - $('#' + settings.toolTipId).outerHeight() - settings.yOffset) + 'px',
                    left: (content.offset().left + content.outerWidth() + settings.xOffset) + 'px'
                })
                .stop().animate({ top: 'toggle' }, 80); 
                {
                    if ($.isFunction(settings.onShow)) {
                        settings.onShow(content);
                    }
                };
            },

            removeTipify = function () {

                $('#' + settings.toolTipId).stop().animate({ top: 'toggle' }, 80); 
                {
                    $(this).remove();
                    if ($.isFunction(settings.onHide)) {
                        settings.onHide(content);
                    }
                };
            };


            if (settings.showButtons == false) {
                content.hover(function () {
                    $('#' + settings.toolTipId).remove();
                    content.attr({ title: '' });
                    buildTipify();
                    positionTipify();
                }, function () {
                    removeTipify();
                });
            }

            if (settings.showButtons == true) {
                content.click(function (el) {
                    $('#' + settings.toolTipId).remove();
                    content.attr({ title: '' });
                    buildTipify();
                    positionTipify();
                    $('#' + settings.closeTipBtn).click(function () {
                        removeTipify();
                        return false;
                    });
                    return false;
                });
            }
            return this;
        });
    };
})(jQuery);

Here is my fiddle demo

Now Can anyone say me how to make this code much better(Better in the sense sweet,short and simple).

  1. I have a problem that If I use my current animation it dosen't looks too good and other than fade I would like to use swing animation.Can anyone show me how to do that?

  2. I want to show the popup down if the target is near to top and if it is near bottom I need to show it on the top similarly for left and to right.

  3. How do I make the tooltip fixed(ie..not to close it)on page load.

share|improve this question
@Rory-Thanks for pointing me to that :) – DotNetter Feb 23 '12 at 14:37
Good luck with this. I'm a fan of qtip. I'll be interested to see how this turns out. – MrBoJangles Feb 23 '12 at 15:29
@MrBoJangles-Thank you so much and I'm also fan for it as in most of the SO answers I found this "QTip-plugin" gave the top most prioirty and I just wanted to start of my plugin from scratch. – DotNetter Feb 23 '12 at 15:36

migrated from stackoverflow.com Feb 23 '12 at 16:53

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.