重新计算浏览器/窗口调整大小上的工具提示位置

本文介绍了重新计算浏览器/窗口调整大小上的工具提示位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

以下代码适用于初始工具提示，但是在调整浏览器窗口大小时，它无法重新计算工具提示位置.我是新手，所以如果有人可以将完整的代码更正后发布-突出显示更正-我将不胜感激.

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

推荐答案

我会指出正确的方向；查看事件$(window).resize(function() { ... }).

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