ブラウザ/ウィンドウのツールチップの位置を再計算

Question

次のコードは、最初のツールチップで機能しますが、ブラウザウィンドウのサイズを変更するとツールチップの位置が再計算されません。私は初心者ですので、誰かが完全なコードを修正して投稿してください - 修正を強調表示してください - 私はそれを感謝します。

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

Answer 1

正しい方向に指摘します。イベント$(window).resize(function() { ... })をチェックしてください。