Question

如何使用django制作简单的鼠标悬停工具提示？让我们说，我有一个表中的产品列表，当我鼠标悬停其中一个时，我可以看到一个简短描述和生产者的方框。将光标移出表格单元格后，工具提示应立即消失。

Answer 1

这可以完全用HTML（也就是你的django模板）中的title属性来完成。 HTML 5允许所有标签的属性，HTML 4.01仅适用于所选元素。见http://www.w3schools.com/tags/att_global_title.asp

Answer 2

你可以使用bootstrap popover + Ajax $ .get当鼠标激活Ajax以获取你想要显示的数据并显示popover与这些数据内容

Answer 3

您也可以使用Bootstrap Tooltips。简单又容易。

Answer 4

我将它用于已经在模型中分配了“help txt”属性的模型表单 - 潜在的 HTML 格式可能会更好，尽管提供了一个带有收费提示的模型表单字段表，但效果很好'help txt' 属性已设置。它是 HTML、DJNAGO 和 JSCRIPT 的组合。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<table>
    {% for field in form %}
    <tr>
        {% if field.help_text %}
            <td>
                <a href="#" data-toggle="tooltip" data-placement="right" title="{{ field.help_text|safe }}">{{field.label}}</a>
            </td>
            <td>
                {{ field }}
            </td>

        {% else %}
            <td>
                 {{ field.label }}
            </td>

            <td>
                {{ field }}
            </td>
        {% endif %}
    </tr>
    {% endfor %}

</table>


<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

使用django的mouseover工具提示

4 个答案: