如何使用jQuery制作一个简单的鼠标悬停弹出提示框？

Question

如何使用jQuery制作一个简单的鼠标悬停弹出提示框？

javascriptjqueryhtmltooltipjquery-ui-tooltip

7

我希望显示与列出信息相关的工具提示，相关的工具提示和信息在表格中的同一单元格中。我不想使用插件来实现这个功能。

当鼠标悬停在任何链接上时，相关的工具提示将显示出来，如果鼠标悬停在工具提示框上，则工具提示框不会关闭。当鼠标移出页面上除了工具提示框或相关链接以外的任何区域时，工具提示框将关闭。

我想制作一个简单的工具提示，就像这样 plugin。有没有不使用插件的简单方法来实现这个功能？ HTML

<table width="600">
<tr>
    <td>                                  
        <a href="#" class="link">Link-1</a>
        <div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    </td>
</tr>
<tr>
    <td>                        
        <a href="#" class="link">Link-2</a>
        <div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
    </td>
</tr>
<tr>
    <td>                        
        <a href="#" class="link">Link-3</a>
        <div class="tooltip">(3) It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</div>
    </td>
</tr>
<tr>
    <td>                        
        <a href="#" class="link">Link-4</a>
        <div class="tooltip">(4) publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </td>
</tr>
</table>

CSS

table td {
    position:relative;
}
.tooltip {
    width:400px;
    height:300px;
    padding:20px;
    border:1px solid #ccc;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    border-radius:3px;
    -webkit-border-radius:3px;
    position:absolute;
    top:5px;
    left:50px;
    display:none;
}

jQuery

$(function(){
    $('.link').hover(
        function(){
            $(this).next().show();
        },
        function(){
            $(this).next().hide();   
        }
    )   
})

JSFiddle

http://jsfiddle.net/96j44/

- midstack

尝试移除 .hide() 并使用 .mouseenter() 来显示它。然后在 .mouseout() 事件中同时定位 .link 和 .tooltip 来关闭它。 - Fernando Silva

@Xotic750 抱歉，但这似乎不是问题所在。工具提示应该在鼠标悬停后保持可见。 - Fernando Silva

好的，我没有听到问题的那一部分，但它与他的jQuery示例相同。我没有看到他想要它“粘性”的部分。我相信这里在SO上有很多答案。 - Xotic750

是的，我知道，但这需要使用插件（例如：http://stevenbenner.github.io/jquery-powertip/（鼠标悬停弹出示例）。）但我不想使用任何插件来完成这个，并且我要求找到一种简单的方法来完成而不使用插件。@Xotic750 - midstack

1

你的示例中 table 有什么特别的原因吗？ - Xotic750

显示剩余4条评论

2个回答

1

明白了。由于您使用了表格，td在.tooltip之上，鼠标移出事件提前触发了。

因此，您需要添加z-index:1;或更高（取决于周围环境）以避免这个问题。

您的jQuery代码将是这样的：

$(function () {
    $('.link').on('mouseenter',
        function () {
            //if a tooltip is visible hide it so the right one can show up
            if ($('.tooltip').is(':visible')) {
                $('.tooltip').hide();
            }
            $(this).next().show();
    });
    $('.tooltip').on('mouseout',
        function () {
            $(this).hide();
    });
})

这是一个可用的JSFIDDLE，高亮显示了td，以防您想要去掉z-index并查看发生了什么。

- Fernando Silva

3

你需要添加表格的mouseleave事件，这样当你将鼠标移动到链接4以下时，它会隐藏工具提示。 - Caner Akdeniz

只是点踩而不解释，对我学习没有帮助。我不介意被点踩，但不知道为什么无法让我有所进步 :( - Fernando Silva

我没有给你的帖子投反对票，事实上，我很惊讶为什么会被踩。你的解决方案非常好用，只需要一些微调即可。 - Caner Akdeniz

你有进一步调整这个解决方案吗？ - Xotic750

@Xotic750 还没有，需要为mouseout事件获取一个选择器，如果鼠标离开.tooltip或table，则隐藏工具提示，但是´.tooltip table´和´.tooltip, table´都不起作用，因为第一个意味着具有该类的表格，而第二个在他离开锚点时立即触发。我没有太多时间，但我正在努力。 - Fernando Silva

显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Xotic750 · Accepted Answer

通过在CSS中添加一些简单的规则，而无需使用jQuery插件，即可轻松地完成此操作。不过，我确实不理解您对table的需求，如果您不使用它，则CSS会更简单。

table td {
  position: relative;
}

.tooltip {
  width: 400px;
  height: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  position: absolute;
  top: 5px;
  left: 50px;
  display: none;
}

.tooltip {
  z-index: 100;
}

.link {
  display: block;
  width: 9%;
}

.link:hover+.tooltip {
  display: block;
}

.tooltip:hover {
  display: block;
}

<table width="600">
  <tr>
    <td>
      <a href="#" class="link">Link-1</a>
      <div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="link">Link-2</a>
      <div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="link">Link-3</a>
      <div class="tooltip">(3) It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</div>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="link">Link-4</a>
      <div class="tooltip">(4) publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </td>
  </tr>
</table>