jquery 创建工具提示答案

【问题标题】：jquery creating tooltipjquery 创建工具提示
【发布时间】：2011-07-22 20:39:02
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery

【解决方案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();
    });

【讨论】：

在第一种方法中，我显示我的鼠标悬停效果，是否可以添加 .fadeIn() 或类似效果？怎么样？

【解决方案2】：

要么使用existing jQuery tooltip plugin，要么研究你喜欢的一个，看看他们是如何处理它的。您需要处理事件冒泡并跟踪要处理 mouseovers 和 mouseouts 的区域。

【讨论】：

我不想使用现有的。我对实现感兴趣，而不是工具提示本身

【解决方案3】：

以下是对您的问题的略微不同的看法以及小提琴：http://jsfiddle.net/SsAY5/3/

【讨论】：