Question

i’m currently having a problem tweaking this tooltip plugin.

(function($) {
    $.fn.toolTip = function() {
        $(this).hover(function () {
            tip = $('.userRank');
            tip.show();
        }, function () {
            tip.delay(2000).fadeOut('fast');
        }).mousemove(function(e) {
            var mousex = e.pageX - 32;
            var mousey = e.pageY - 86; 
            var tipWidth = tip.width();
            var tipHeight = tip.height();
            var tipVisX = $(window).width() - (mousex + tipWidth);
            var tipVisY = $(window).height() - (mousey + tipHeight);
            if (tipVisX < 20) { 
                mousex = e.pageX - tipWidth - 20;
            } 
            if (tipVisY < 20) { 
                mousey = e.pageY - tipHeight - 55;
            }
            tip.css({  top: mousey, left: mousex }).stop();
        });
    };
})(jQuery);

as you can see i have defined the tip container or element via tip variable

tip = $('.userRank');

is there a possibility that i can select the elements optionally via settings or options so that it will look like this.

$('.bidInput').toolTip('#socialIcons');

or

$('.bidInput').toolTip({tip : '#socialIcons'});

Answer 1

Something like this might work for you:

// very simplified
(function($) {
    $.fn.toolTip = function(options) {
        var settings = $.extend({
            'tip': '#defaultTip'
        }, options);

        alert(settings.tip); // for testing
        var tip = $(settings.tip);

        // the rest of your code
    };
})(jQuery);

$('.bidInput').toolTip({ tip: '#socialIcons' });

So, if you try calling it like this:

$('.bidInput').toolTip();

Then you’ll notice that ‘#defaultTip’ will be used.

---

Edit

Additionally, I created a jsFiddle for you here.