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 div.tooltip绑定mousout事件：

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

Then add this way:

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

});

Checkout the demo fiddle here

避免工具提示隐藏鼠标悬停

1 个答案: