我正在寻找javascript或jquery中的智能工具提示弹出窗口

Question

我正在寻找一个工具提示弹出窗口,它附加到我网站上的某些链接.

• 当用户鼠标悬停时,工具提示弹出窗口应该淡入.
• 当用户在其中导航时,工具提示弹出窗口应保持活动状态.
• 工具提示应根据其位置弹出到顶部/底部或侧面(例如,如果顶部没有足够的空间,则弹出到底部)

对这样的事情有什么想法或建议吗？也许是jquery？

Answer 1

诀窍在于CSS,而不是JavaScript.首先以静态HTML的形式创建弹出窗口,使其在活动时以您希望的方式显示.然后隐藏它并.fadeIn()在jQuery中使用.

我会尝试这样的事情:

<a href="foo.htm" class="tooltip">
    Foo
    <div>Tooltip content</div>
</a>

CSS:

a.tooltip {
    position: relative;
}
a.tooltip > div {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -150px;
    width: 300px;
}

JavaScript的:

$("a.tooltip").hover(function () {
    $("> div", this).fadeIn();
},
function () {
    $("> div", this).fadeOut();
});

编辑:这是一个演示:http://jsfiddle.net/gilly3/b3PjW/.我收回有关JavaScript不是一个棘手的部分.考虑屏幕边缘的链接意味着充足的定位逻辑.我的jsfiddle做了一点,但没有考虑滚动条或垂直定位.这对您来说可能是也可能不是问题.如果是,一个好的插件应该为你完成所有这些.

Answer 2

使用纯css.Hint.css可能很有用.

<p class="hint--bounce" class="hint--rounded" data-hint="Popup text!">blah</p>

Answer 3

你可以尝试qtip -

http://craigsworks.com/projects/qtip/