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

avoid tooltip from hide on mouse over

本文关键字：悬停 隐藏 鼠标 工具提示      更新时间：2023-09-26

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

$(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>
您可以

做的是从target中删除mouseout，而是可以从工具提示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();
    }); 
});

在此处查看演示小提琴

相关文章：