recalculating tooltip position on browser/window resize
The following code work开发者_运维知识库s 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);
I'll point you in the right direction; check out the event $(window).resize(function() { ... })
.
精彩评论