Question

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

（不点击）会出现一个弹出窗口，上面有关于该句子的文章的注释/评论。
平滑动画，而不是必须单击退出的对话框。

我环顾四周，但找不到一个体面的例子。 Here is an okay one。

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

Answer 1

您可以使用此jquery tooltip plugin

它非常易于使用，因为工具提示的内容是纯HTML，所以它非常可定制和灵活。

不是编写一些示例代码，而是指向Demos Page

我希望这有帮助，如果你想要更具体的东西，请告诉我。

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>

我不是这些家伙的附属品，但我听说过他们的好消息。我没有看到你为什么要推出自己的原因。

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

3 个答案: