我正在 javascript 或 jquery 中寻找智能工具提示弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7247426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I'm looking for a smart tooltip popup in javascript or jquery
提问by Lupo
I am looking for a tooltip popup which is appended to some links on my website.
我正在寻找附加到我网站上某些链接的工具提示弹出窗口。
- the tooltip popup should fade in when users mouse hovers.
- the tooltip popup should stay active while the user is navigating in it.
- the tooltip should popup to the top/bottom or side depending on it's position (e.g. to the bottom if there is not enough space at the top)
- 当用户鼠标悬停时，工具提示弹出窗口应该淡入。
- 当用户在其中导航时，工具提示弹出窗口应保持活动状态。
- 工具提示应根据其位置弹出到顶部/底部或侧面（例如，如果顶部没有足够的空间，则弹出到底部）
Any idea or recommendation for something like this? Maybe jquery?
对这样的事情有什么想法或建议吗？也许jquery？
采纳答案by ipr101
回答by gilly3
The trick is in the CSS, not the JavaScript. First create your popup in static HTML the way you want it to look when active. Then hide it and use .fadeIn()in jQuery.
诀窍在于 CSS，而不是 JavaScript。首先在静态 HTML 中创建您希望它在活动时看起来的方式的弹出窗口。然后隐藏它并.fadeIn()在jQuery中使用。
I'd try something like this:
我会尝试这样的事情：
<a href="foo.htm" class="tooltip">
Foo
<div>Tooltip content</div>
</a>
CSS:
CSS：
a.tooltip {
position: relative;
}
a.tooltip > div {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -150px;
width: 300px;
}
JavaScript:
JavaScript：
$("a.tooltip").hover(function () {
$("> div", this).fadeIn();
},
function () {
$("> div", this).fadeOut();
});
Edit:Here's a demo: http://jsfiddle.net/gilly3/b3PjW/. I take back the part about the JavaScript not being the tricky part. Accounting for links on the edges of the screen means plenty of positioning logic. My jsfiddle does a little of it, but doesn't take into account scrollbars or vertical positioning. That may or may not be an issue for you. If it is, a good plugin should do all that for you.
编辑：这是一个演示：http: //jsfiddle.net/gilly3/b3PjW/。我收回关于 JavaScript 的部分不是棘手的部分。考虑屏幕边缘的链接意味着大量的定位逻辑。我的 jsfiddle 做了一点，但没有考虑滚动条或垂直定位。这对您来说可能是也可能不是问题。如果是这样，一个好的插件应该为你做这一切。
回答by blessenm
回答by Martin Andersson
I wrote a new jQuery based module 'cause I wanted Twitter's nice tooltip. But their tooltip was way too simple, featured no move-in or move-out animation. The API was kind of worthless to use in a real programmatic environment. Even so, I also found it was buggy at times. So I wrote my own replica of their tooltip(from scratch! I didn't even look at their code.) with some added benefits. Goto www.matooltip.comand have a view at the advanced example you'll see at the bottom of the main page (click the link that says "lines of code"). To match all of your intended purposes, you'll have to become a power user and take over the content management and setup your own event handlers like I kind of do in that particular example. Still, the module will be a real breeze for you. Positioning the tooltip and all the display logic are built in! I hope the complementary site has all the answers you'll need, feel free to contact me otherwise and I'll help you out. I can even write a new version and implement some new features if you want so and if they fit the overall design goal I have for this module.
我写了一个新的基于 jQuery 的模块，因为我想要Twitter 的好工具提示。但是他们的工具提示太简单了，没有移入或移出动画。在真正的编程环境中使用 API 是毫无价值的。即便如此，我也发现它有时会出现问题。所以我写了我自己的工具提示副本（从头开始！我什至没有看他们的代码。）还有一些额外的好处。转到www.matooltip.com并查看主页底部的高级示例（单击“代码行”链接）。为了满足您的所有预期目的，您必须成为高级用户并接管内容管理并设置您自己的事件处理程序，就像我在那个特定示例中所做的那样。尽管如此，该模块对您来说还是轻而易举的。定位工具提示和所有显示逻辑都内置了！我希望补充网站有你需要的所有答案，请随时与我联系，我会帮助你。如果您愿意，我什至可以编写一个新版本并实现一些新功能，并且它们符合我对该模块的总体设计目标。
回答by c0deNinja
I believe this nice jQuery plugin will do the trick for you
我相信这个不错的 jQuery 插件会帮到你
