Question

我想创建一个工具提示，当用户将鼠标悬停在链接上时，它会显示工具提示，但不会在mouseout上关闭。它仅在工具提示区域鼠标输出时关闭。换句话说，我可以悬停链接，查看工具提示，使用鼠标导航到该工具提示并在其中执行其他事件。一旦我将鼠标移出工具提示（不是链接），它就会关闭。我有一个代码，显示链接悬停上的工具提示，但是一旦我尝试移动到该工具提示区域，它就会隐藏它。我正在使用简单的实时悬停方法：

 myLink.live('mouseover mouseout', function (e) { 
     ...show balloon...
 }

如何在工具提示鼠标输出时关闭它，而不是myLink mouseout？感谢

Answer 1

试试这个

    myLink.live('mouseover', function (e) { 
         //Code to show the tooltip
         $("toolTipContainerSelector").fadeIn(200);  
    });

$("toolTipContainerSelector").mouseout(function(){
       $(this).hide();
    })

//The below code will take care of hiding the tooltip if you click on the page other than the tooltip. In case you need this please use the below code
    $("body").click(function(){
       if($("toolTipContainerSelector").is(":visible"))
         $("toolTipContainerSelector").hide();
    });

    $("toolTipContainerSelector").click(function(e){
       e.stopPropagation();
    });

Answer 2

要么使用existing jQuery tooltip plugin，要么学习其中一个你想知道他们如何处理它的人。您需要处理事件冒泡并跟踪要处理mouseovers和mouseouts的区域。

Answer 3

对于您的问题以及小提琴，您可能会略有不同：http://jsfiddle.net/SsAY5/3/

jquery创建工具提示

3 个答案: