Question

我有一个div，里面有一个表单。表单很小，由一个或两个下拉/文本框组成。我想知道要做以下事情需要什么：

当我点击链接时，会弹出一个工具提示，其中包含表单。它出现在我点击的链接顶部，以便当它出现时鼠标位于其顶部。
当鼠标退出工具提示的边界时，它会消失。

进行一些谷歌搜索，我找到的所有工具提示示例都会悬停在给定区域上方。我看到的所有jQuery弹出示例都是模态的，并强制用户明确关闭它。

有没有人知道如上所述我可以提供工具提示的方法？

Answer 1

如果找不到有效的插件，那么你所描述的内容非常直接。

您只需将mousemove事件绑定到文档，并检查其目标或其目标的父项是否是您的工具提示。

此示例适用于工具提示旁边的触发按钮，但它可能直接将其置于触发器上，因为触发器不会被悬停。

$("#trigger").hover(function () {
    // move the tool tip div into place
    // show the tool tip
}, function () {    
    $(document).bind('mousemove.tooltip', function (e)
    {
        if (e.target.id !== 'tooltip' && $(e.target).parents('#tooltip').length === 0)
        {
            // close tooltip
            $("#tooltip").hide();
            $(document).unbind('mousemove.tooltip');
        }
    });
});

这是一个基本的小提琴，如下所述：

http://jsfiddle.net/5h3Zy/5/

Answer 2

如果您想使用jquery UI插件，请使用对话框和以下功能：

$("#yourDialog").dialog({ autoOpen: false });

$("#yourLink").click(function(){
      $("#yourDialog").open();
});

$("#yourDialog").mouseover(function() {
  }).mouseout(function(){
    $(this).close();  
});

Answer 3

嗯我创造了一些东西，我想你看了之后在哪里

http://jsfiddle.net/hDcac/1/

代码有点乱，但你应该明白这个想法。 :)

Answer 4

<script type="text/javascript">
$(document).ready(function () {
    $('#mylink').hover(function () {
        $('#mytooltip').stop(true, true).fadeIn();
    }, function () {
        $('#mytooltip').fadeOut();
    });
    $('#mytooltip').hover(function () {
        $('#mytooltip').stop(true, true).fadeIn();
    }, function () {
        $('#mytooltip').fadeOut();
    });
})
</script>
<div id="mylink">My Link</div>
<div id="mytooltip'">My Form</div>

这会在每个元素上放置一个“悬停”事件。只要你的鼠标位于任何一个元素上，就会调用“stop（true，true）”来阻止fadeOut出现。一旦鼠标离开元素，工具提示就会消失。

使用jQuery进行工具提示

4 个答案: