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

Question

<分区>

Answer 1

诀窍在于 CSS，而不是 JavaScript。首先在静态 HTML 中创建您希望它在事件时看起来的方式的弹出窗口。然后隐藏它并在 jQuery 中使用 .fadeIn()。

我会尝试这样的事情:

<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 做了一点，但没有考虑滚动条或垂直定位。这对你来说可能是也可能不是问题。如果是，一个好的插件应该可以为您完成所有这些工作。