Question

当您点击Google日历中的空白区域以添加活动时，或者当您点击已经放置的活动时，您将获得一个非常漂亮的弹出窗口，其中包含有关该活动的信息（请参阅附图）。

如何使用CSS和Javascript创建类似的弹出窗口（我更喜欢jQuery）。如果有帮助，我也在使用Bootstrap。

请注意，弹出位置取决于我将点击的位置，所以让我说我有一个html表，根据我将点击弹出窗口将在这个位置附近生成并指向那个特定的。

还要注意关闭行为（关闭按钮，如果我点击它将关闭弹出窗口）。

如果有多个好的答案，我会接受最简单的一个与jQuery（和jQuery UI）和Bootstrap一起使用 - 如果没有使用其他框架，我会很感激。

谢谢！

Google calendar popup

Answer 1

有一个名为jquery tip-tip的插件可能会完成你所追求的目标。您基本上希望在单击的区域上方显示一些HTML。提示提示可以将html显示为您点击的点上方的“气泡”。风格也很容易。它主要用于工具提示，但我认为没有理由不能适应它。

（p.s。您需要使用'content'属性来设置内容）

"content: string (false by default) - HTML or String to use as the content for TipTip. 
Will overwrite content from any HTML attribute."

Answer 2

我假设你正在谈论tooltips这里有帮助你的链接

<强> http://jquerytools.org/demos/tooltip/index.html

Answer 3

其他答案包含有关工具提示的链接。但是，我认为像jQuery UI dialog这样的对话框组件可以更好地满足您的要求。

Answer 4

当问到这个问题时，也许这在3月份不存在，但当前版本的Bootstrap有像问题中那样的漏洞。参见：

Answer 5

您可以使用FireBug分析页面并检查CSS属性的实际值（即边框是什么颜色，或者有多少填充）。