javascript - 避免工具提示在鼠标悬停时隐藏

Question

当鼠标在工具提示上时，我不想隐藏我的工具提示。但它应该将我们的鼠标从工具提示中隐藏起来。请帮我这样做

$(document).ready(function(){

  $('[rel=tooltip]').bind('mouseover', function() {

    if ($(this).hasClass('ajax')) {
      var ajax = $(this).attr('ajax');  

      $.get(ajax, function(theMessage) {
        $('<div class="tooltip">'  + theMessage + '</div>').appendTo('body').fadeIn('fast');
      });
    }
    else {
      var theMessage = $(this).attr('content');
      $('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
    }

    $(this).bind('mousemove', function(e) {
      $('div.tooltip').css({
        'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
          'left': e.pageX + 15
      });
    });
  }).bind('mouseout', function() {
    $('div.tooltip').fadeOut('slow', function() {
        $(this).remove();
    }); 
  });
});

对应的（修剪过的）HTML，此处垂直格式化以更清楚地显示属性：

<a href="#"
   alt="Image"
   tooltip=""
   rel="tooltip"
   content="&lt;div id=imagcon&gt;&lt;img src=img/1.jpg class=tooltip-image/&gt;&lt;/div&gt;"
>View Sonic</a>

Answer 1

您可以做的是mouseout从中删除target，而是可以从工具提示 div 绑定 mousout 事件div.tooltip：

$('[rel=tooltip]').bind('mouseover', function(){
   ...........
});

Then add this way:

$(document).on('mouseout click', 'div.tooltip', function(){
    $('div.tooltip').fadeOut('slow', function(){
        $(this).remove();
    }); 

});

在此处查看演示小提琴