Question

通过使用 Bootstrap 文档中的弹出窗口示例并在浏览器的调试器中检查 DOM，我确定 Bootstrap 将弹出窗口组件创建为 DOM 中目标元素的同级元素。 正如我上面提到的，这会影响悬停事件的行为，只要用户将鼠标从 <a> 链接移动到弹出窗口本身，就会触发“鼠标移出”事件。

我可以扩展悬停事件以包含弹出窗口，就是将弹出窗口作为目标元素的子元素，这样悬停事件就会继承。 通过查看文档中的弹出选项，可以通过在 container 选项中传递父元素来完成此操作。

将 popover 作为悬停元素的子元素可以很好地用于按钮或一般的 <div> 或 <span> 元素，但在我的情况下，popover 的 target 将是显示用户名的可点击链接的 <a> 元素。 使 popover 成为 <a> 元素的子元素的问题是，弹出窗口将获得 <a> 父元素的链接行为。 最终的结果是这样的：

        <a href="..." class="user_popup">
            username
            <div> ... popover elements here ... </div>
        </a>

为了避免弹出窗口出现在 <a> 元素中，我要使用的是另一个技巧。 我要将 <a> 元素封装在 <span> 元素中，然后将悬停事件和弹出窗口与 <span> 相关联。 由此产生的结构将是：

        <span class="user_popup">
            <a href="...">
                username
            </a>
            <div> ... popover elements here ... </div>
        </span>

<div> 和 <span> 元素是不可见的，因此它们是用于帮助组织和构建 DOM 的重要元素。 div 元素是 块元素 ，有点像 HTML 文档中的段落，而 <span> 元素是 行内元素 ，它可以用于字词级别。 本处，我决定使用 <span> 元素，因为我要包装的 <a> 元素也是行内元素。

因此，我将继续并重构我的 app/templates/_post.html 子模板以包含 <span> 元素：

...
                {% set user_link %}
                    <span class="user_popup">
                        <a href="{{ url_for('main.user', username=post.author.username) }}">
                            {{ post.author.username }}
                        </a>
                    </span>
                {% endset %}
...

如果你想知道弹出式 HTML 元素在哪里，好消息是我不必操心这一点。 当我在刚刚创建的 <span> 元素上调用 popover() 初始化函数时，Bootstrap 框架会为我动态地插入弹出组件。