Question

最后我使用在 Ajax 回调函数中传递给我的 data 参数来创建我的弹窗组件：

app/templates/base.html ：显示弹窗。

                                function(data) {
                                    xhr = null;
                                    elem.popover({
                                        trigger: 'manual',
                                        html: true,
                                        animation: false,
                                        container: elem,
                                        content: data
                                    }).popover('show');
                                    flask_moment_render_all();
                                }

弹出窗口的实际创建非常简单，Bootstrap 的 popover() 函数完成设置所需的所有工作。 弹出窗口的选项作为参数给出。 我已经用 manual 触发模式，HTML 内容，没有淡入淡出的动画（这样它就会更快地出现和消失）配置了这个弹出窗口，并且我已经将父元素设置为 <span> 元素本身，所以悬停行为通过继承扩展到弹出窗口。 最后，我将 Ajax 回调函数的 data 参数作为 content 参数的值。

popover() 调用创建了一个弹窗组件，该组件也具有一个名为 popover() 的方法来显示弹窗。因此我不得不添加第二个 popover('show') 调用来将弹窗显示到页面中。

弹出窗口的内容包括 第十二章 中通过 Flask-Moment 插件生成的“最后访问”日期。 文档 中提到，当通过 Ajax 添加新的 Flask-Moment 元素时，需要调用 flask_moment_render_all() 函数来适当地渲染这些元素。

现在剩下的就是完善鼠标移出事件处理程序上的删除弹出窗口逻辑。 如果用户将鼠标移出目标元素，该处理程序已经具有中止弹出操作的逻辑。 如果这些条件都不适用，那么这意味着弹出窗口当前显示并且用户正在离开 target 区域，所以在这种情况下，对目标元素的 popover('destroy') 调用将正确地执行移除和清理。

app/templates/base.html ：销毁弹窗。

                function(event) {
                    // mouse out event handler
                    var elem = $(event.currentTarget);
                    if (timer) {
                        clearTimeout(timer);
                        timer = null;
                    }
                    else if (xhr) {
                        xhr.abort();
                        xhr = null;
                    }
                    else {
                        elem.popover('destroy');
                    }
                }