jquery - 如何通过鼠标悬停在文章中弹出文本？

Question

我想看一篇新闻文章，当有人将鼠标悬停在文本的给定部分（不是蓝色超链接）时-

1. （无需单击）将弹出一个弹出窗口，其中包含对该给定句子的文章的注释/评论。
2. 流畅的动画，而不是必须单击退出的对话框。

我环顾四周，但找不到一个像样的例子。这是一个好的。

关于使用什么的任何想法？jQuery？如果是这样，有什么好的建议吗？

Answer 1

你可以使用这个jquery 工具提示插件

它非常易于使用，并且由于工具提示的内容是纯 HTML，因此非常可定制且灵活。

我不会编写一些示例代码，而是将您指向演示页面

我希望这会有所帮助，如果您想要更具体的内容，请告诉我。

Answer 2

创建一个具有您想要的一些属性的 css 类。

.ZoomIt
{
   position:relative;
   z-index:99;
   height: 200px;
   width: 200px;
}

并在悬停事件上切换类

$('yourTextualDiv').hover(function(){
     $(this).toggleClass('ZoomIt');
});

Answer 3

如果您想要一个功能齐全的工具提示插件，请查看Tooltipster。您只需在文档中引用它，就像这样......

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>

...然后您可以通过各种方式添加工具提示，具体取决于您希望工具提示的复杂程度：

<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

激活它所需要的只是某处的一个小 JS 块：

<script>
    $(document).ready(function() {
        $('.tooltip').tooltipster();
    });
</script>

我不隶属于这些家伙，但我听说过他们的好消息。我看不出有什么理由让你自己动手。