Question

我将Flask与Bootstrap结合使用，并且试图在表格单元格中显示长文本作为工具提示（以防止表格重新格式化）。如果使用Bootstrap 3.3.7，一切正常，但是如果我切换到Bootstrap 4.3.1，则工具提示将显示在后台。我可以在浏览器的开发人员工具中看到它在那里，并且该代码实际上出现在HTML源代码中，但是表本身覆盖了它。

这是我的代码：

base.html：

{% extends 'bootstrap/base.html' %}

{%- block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate">
<meta http-equiv="cache-control" content="post-check=0, pre-check=0">
<meta http-equiv="pragma" content="no-cache">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
{%- endblock metas %}

{% block scripts %}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
{% endblock %}

{% block content %}
<div class="container-fluid">
    {% block app_content %}{% endblock %}
</div>
{% endblock %}

index.html：

{% extends "base.html" %}
{% block app_content %}
<div class="container-fluid">
    <table class="table table-hover" style="width:100%">
        <thead>
            <form id="searchform" action="/results" method="post" novalidate>
                {{ form.hidden_tag() }}
                {{ form.submit_search() }}

... search form ...

            </form>
        </thead>
        <tbody>
            {% for result in results %}
            <tr>

... some other columns ...

                <td style="text-align:center;">
                    {% if result.comment|length > 20 %}
                    <a href="#" data-toggle="tooltip" data-container="body" data-placement="left"
                        title="{{ result.comment }}">{{ result.comment|truncate(20, False, ' ...') }}</a>
                    {% else %}
                    {{ result.comment }}
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}

不幸的是，我还没有找到解决方案。到目前为止，Google搜寻并没有太大帮助。

工具提示/弹出框显示在Bootstrap 4的背景中

0 个答案: