recalculating tooltip position on browser/window r

问题:

The following code works for initial tooltip, but on resizing the browser window it fails to recalculate the tooltip position. I am a newbie, so if someone could please post the complete code as corrected - highlighting the correction - I'd appreciate it.

(function($){

$.fn.tooltip = function(options) {

    // Defaults

    var defaults = {

        // Transition time
        transtime : 250,

        // Start position, relative to the anchor
        start_position : 'center',

        // Object position relative to the start position
        relative_position : [0, 12],

        // Determines if the object should be horizontally centered to the object position
        object_center : true,

        // Pixels of vertical movement movement 
        vertical_move : 5,
    };

    var options = $.extend(defaults, options);

    this.each(function() {

        // Sets CSS to inline-block

        $(this).css('display', 'inline-block');

        var that = this;

        $(window).load(function(){

            // Object Height, Width

            var height = $(that).height();  
            var width = $(that).width();                

            // Distance from Top, Left

            var top_offset = $(that).offset().top;
            var left_offset = $(that).offset().left;

            // States variables

            var start_top = 0;
            var start_left = 0;


            // Various start positions

            switch (options.start_position) {

                case 'center':

                    start_top = top_offset + (height/2);
                    start_left = left_offset + (width/2);

                break;

                case 'bottom':

                    start_top = top_offset + height;
                    start_left = left_offset + (width/2);

                break;

                case 'top':

                    start_top = top_offset;
                    start_left = left_offset + (width/2);

                break;

                case 'left':

                    start_top = top_offset + (height/2);
                    start_left = left_offset;

                break;

                case 'right':

                    start_top = top_offset + (height/2);
                    start_left = left_offset + width;

                break;

            }

            // Move position offset

            var vertical_move = options.vertical_move;

            // Final uncentered positioning

            var left = start_left + options.relative_position[0];
            var top = start_top + options.relative_position[1] - vertical_move;

            // Tooltip start

            var tooltip_html = '<div class="tooltip"><div class="tooltip-top"><div class="tooltip-top-left"><div class="tooltip-top-right"></div></div></div><div class="tooltip-middle"><div class="tooltip-middle-left"><div class="tooltip-middle-right"><div class="tooltip-content">';

            // Tooltip content

            var content = $(that).attr('title');
            $(that).attr('title', '');

            tooltip_html += content;

            // Tooltip end

            tooltip_html += '</div></div></div></div><div class="tooltip-bottom"><div class="tooltip-bottom-left"><div class="tooltip-bottom-right"></div></div></div></div>';

            // Add tooltip to HTML

            var tooltip = $(tooltip_html).appendTo('body');

            // Center the tooltip and find width

            var tooltip_width = $(tooltip).width();

            if(options.object_center == true){
                left -= (tooltip_width/2);
            }

            // Position the tooltip and add the cursor

            $(tooltip).css("left", left+"px").css("top", top+"px").css("cursor", "pointer");


            // Hide the tooltip

            $(tooltip).hide();

            // Transition time

            var transtime = options.transtime;

            // The animation

            var timer;

            $(that).hover(function(){

                $(tooltip).stop(true).fadeTo(transtime, 1.0).animate({top: top + vertical_move}, {queue: false, duration:transtime});

            }, function(){

                timer = setTimeout(function() {

                    $(tooltip).stop(true).fadeOut(transtime).animate({top: top}, {queue: false, duration:transtime});

                }, 0);

            });


            // Hover mode stays on for the tooltip

            $(tooltip).hover(function(){

                clearTimeout(timer);
                $(this).show();

            },function(){

                $(tooltip).stop(true).fadeOut(transtime).animate({top: top}, {queue: false, duration:transtime});

            });

        });

    });

}

})(jQuery);

回答1:

I'll point you in the right direction; check out the event $(window).resize(function() { ... }).