響應式工具提示與工具提示懸停

Question

我已經設置了這段代碼，以便與我爲WordPress構建的短代碼/插件一起工作......所有事情都最終與響應式（這是第三個jQuery修訂版） m有一個問題：懸停在工具提示上。

我需要能夠鼠標進入工具提示，並保持可見。如果出現以下情況，我需要工具提示消失：

a。工具提示被剔除，或者...... b。目標被挖出

jQuery不是我的強大套件，我只能得到一個或另一個發生。

HTML：

<div class="mbt-hover" style="width:100px; height:auto;"> 
    <p>Test Text</p> 
    <div class="mbt-tooltip" style="width:200px; height:auto;"> 
     <p>Test pop-up <a title="About" href="http://www.mindblowingthings.dev/about/">content</a> 
     <ul> 
      <li>this</li> 
      <li>is</li> 
      <li>a list</li> 
     </ul> 
    </div> 
</div> 

CSS：

#tooltip { 
text-align: center; 
color: #fff; 
background: #111; 
position: absolute; 
z-index: 100; 
padding: 15px; 
} 

#tooltip:after { 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-top: 10px solid #111; 
    content: ''; 
    position: absolute; 
    left: 50%; 
    bottom: -10px; 
    margin-left: -10px; 
} 

    #tooltip.top:after { 
     border-top-color: transparent; 
     border-bottom: 10px solid #111; 
     top: -20px; 
     bottom: auto; 
    } 

    #tooltip.left:after { 
     left: 10px; 
     margin: 0; 
    } 

    #tooltip.right:after { 
     right: 10px; 
     left: auto; 
     margin: 0; 
    } 


.mbt-tooltip { 
display: none; 
width: auto; 
max-width: 100% !important; 
} 

JQUERY

$(function() { 

    var targets = $('.mbt-hover'), 
     target = false, 
     tooltip = $('.mbt-tooltip'), 
     title = false; 

    targets.bind('mouseenter', function() 
    { 
     target = $(this); 
     tip  = target.children('.mbt-tooltip'); 
     tooltip = $('<div id="tooltip"></div>'); 

     if(!tip || tip == '') 
      return false; 

     //target.remove('.mbt-tooltip'); 
     //target.removeAttr('title'); 
     tooltip.css('opacity', 0) 

       .html(tip.clone().show()) 

       .appendTo('body'); 

     var init_tooltip = function() 
     { 
      if($(window).width() < tooltip.outerWidth() * 1.5) 
       tooltip.css('max-width', $(window).width()/2); 
      else 
       tooltip.css('max-width', 340); 

      var pos_left = target.offset().left + (target.outerWidth()/2) - (tooltip.outerWidth()/2), 
       pos_top = target.offset().top - tooltip.outerHeight() - 20; 

      if(pos_left < 0) 
      { 
       pos_left = target.offset().left + target.outerWidth()/2 - 20; 
       tooltip.addClass('left'); 
      } 
      else 
       tooltip.removeClass('left'); 

      if(pos_left + tooltip.outerWidth() > $(window).width()) 
      { 
       pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth()/2 + 20; 
       tooltip.addClass('right'); 
      } 
      else 
       tooltip.removeClass('right'); 

      if(pos_top < 0) 
      { 
       var pos_top = target.offset().top + target.outerHeight(); 
       tooltip.addClass('top'); 
      } 
      else 
       tooltip.removeClass('top'); 

      tooltip.css({ left: pos_left, top: pos_top }) 
        .animate({ top: '+=10', opacity: 1 }, 50); 
     }; 

     init_tooltip(); 
     $(window).resize(init_tooltip); 


     var remove_tooltip = function() 
     { 
      tooltip.animate({ top: '-=10', opacity: 0 }, 300, function() 
      { 
       $(this).remove(); 
      }); 

      target.children('.mbt-tooltip', tip); 

     }; 

     //**** ISSUE AREA ****// 
     target.bind('mouseleave', remove_tooltip); 
     tooltip.bind('click', remove_tooltip); 
    }); 
}); 

FIDDLE： http://jsfiddle.net/RevConcept/L8bho8yu/

Answer 1

那是因爲你對mouseenter事件.mbt-hover

tooltip = $('<div id="tooltip"></div>'); 

創建的tooltip是你附加到body一個新元素。因爲它不是.mbt-hover的子項，所以當您嘗試將鼠標懸停在tooltip上時，它將觸發mouseleave事件.mbt-hover，從而刪除tooltip。

你需要做的，是附加您創建的.mbt-hover，而不是到body新tooltip，所以當你將鼠標懸停在tooltip，它仍然算作mouseenter上.mbt-hover並不會刪除tooltip 。 （*注：這將導致相同的只有你tooltipabsolute position是relative到body而不是父容器，如果你的tooltip位置relative到它的父，你需要改變你的代碼來計算top，left，或者right）

你也有一些多餘code，例如：

1. var targets = $('.mbt-hover')與target = $(this);，這兩個可變指向/靶向到這是.mbt-hover相同的元素，所以它的對於mouseenter事件中的每種用法，只需使用targets即可，方法是將target替換爲targets。
2. 因爲你已經在你的HTML一個tooltip與.mbt-tooltip類，它是更好地使用它的tooltip，而不是創建一個新的tooltip元素克隆，你已經在一個（因爲document ready，你tooltip = $('.mbt-tooltip')聲明它，但隨後在mouseenter你tooltip = $('<div id="tooltip"></div>');

改變呢？這裏是你的Updated Fiddle這是從冗餘code取消了對第一點。