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.
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.
我编写了一个新的基于 jQuery 的模块，因为我想要 Twitter 的漂亮工具提示。但他们的工具提示太简单了，没有移入或移出动画。在真正的编程环境中使用该 API 有点毫无价值。即便如此，我有时也发现它有问题。 因此，我编写了自己的工具提示副本（从头开始！我什至没有看他们的代码。）并具有一些额外的好处。转到 www.matooltip.com 并查看主页底部的高级示例（单击“代码行”链接）。为了满足您的所有预期目的，您必须成为高级用户并接管内容管理并设置您自己的事件处理程序，就像我在该特定示例中所做的那样。尽管如此，该模块对您来说仍然是一件轻而易举的事。定位工具提示和所有显示逻辑都是内置的！我希望补充网站能够提供您需要的所有答案，否则请随时与我联系，我会为您提供帮助。如果您愿意并且它们符合我对此模块的总体设计目标，我什至可以编写一个新版本并实现一些新功能。
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.com and 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.
发布评论
评论（5）
技巧在于 CSS，而不是 JavaScript。首先，按照您希望其在活动时的外观的方式，以静态 HTML 创建弹出窗口。然后隐藏它并在 jQuery 中使用
.fadeIn()。我会尝试这样的事情：
CSS：
JavaScript：
编辑：这是一个演示：http://jsfiddle。网/gilly3/b3PjW/。我收回关于 JavaScript 的部分，这不是棘手的部分。考虑到屏幕边缘的链接意味着大量的定位逻辑。我的 jsfiddle 做了一些工作，但没有考虑滚动条或垂直定位。这对您来说可能是问题，也可能不是问题。如果是的话，一个好的插件应该可以为你完成这一切。
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.I'd try something like this:
CSS:
JavaScript:
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.
使用纯CSS。 Hint.css 可能有用。
Using pure css. Hint.css might be useful.
您可以尝试 qtip -
http://craigsworks.com/projects/qtip/
You could try qtip -
http://craigsworks.com/projects/qtip/
我编写了一个新的基于 jQuery 的模块，因为我想要 Twitter 的漂亮工具提示。但他们的工具提示太简单了，没有移入或移出动画。在真正的编程环境中使用该 API 有点毫无价值。即便如此，我有时也发现它有问题。 因此，我编写了自己的工具提示副本（从头开始！我什至没有看他们的代码。）并具有一些额外的好处。转到 www.matooltip.com 并查看主页底部的高级示例（单击“代码行”链接）。为了满足您的所有预期目的，您必须成为高级用户并接管内容管理并设置您自己的事件处理程序，就像我在该特定示例中所做的那样。尽管如此，该模块对您来说仍然是一件轻而易举的事。定位工具提示和所有显示逻辑都是内置的！我希望补充网站能够提供您需要的所有答案，否则请随时与我联系，我会为您提供帮助。如果您愿意并且它们符合我对此模块的总体设计目标，我什至可以编写一个新版本并实现一些新功能。
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.com and 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 插件会为您带来帮助
Coda Popup Bubbles
I believe this nice jQuery plugin will do the trick for you
Coda Popup Bubbles