如何在Django Admin列表视图中添加点击/悬停触发的提示框？

直接在admin.py中通过自定义列表显示字段+内嵌JS初始化tooltip的方式实现，无需修改模板：

步骤1：自定义带提示的列表字段 #

在你的ModelAdmin类中，添加一个自定义方法来生成带图标和tooltip属性的HTML内容，用format_html确保HTML被正确渲染（而非转义）：

from django.contrib import admin
from django.utils.html import format_html
from .models import YourModel

class YourModelAdmin(admin.ModelAdmin):
    # 将自定义字段加入列表显示
    list_display = ('id', '常规字段1', '常规字段2', '带提示的字段')

    def 带提示的字段(self, obj):
        # 仅在首次渲染时插入tooltip初始化JS，避免重复加载
        if not hasattr(self, '_tooltip_initialized'):
            self._tooltip_initialized = True
            tooltip_js = format_html("""
                <script>
                    $(document).ready(function() {{
                        // 初始化tooltip，支持悬停和点击触发
                        $('[data-toggle="tooltip"]').tooltip({{
                            trigger: 'hover click',
                            placement: 'top', // 提示框位置：top/bottom/left/right
                            delay: {{ show: 300, hide: 100 }} // 延迟显示/隐藏
                        }});
                    }});
                </script>
            """)
        else:
            tooltip_js = ''

        # 返回带图标和tooltip的HTML，用Django Admin内置的帮助图标
        return format_html(
            '{0}<span data-toggle="tooltip" title="{1}"><span class="icon-help"></span> {2}</span>',
            tooltip_js,
            obj.目标字段名,  # 替换成你要显示提示的字段
            # 可选：截断长文本，避免列表过宽
            obj.目标字段名[:20] + '...' if len(str(obj.目标字段名)) > 20 else obj.目标字段名
        )

    # 设置自定义字段在列表中的显示名称
    带提示的字段.short_description = '字段显示名'

admin.site.register(YourModel, YourModelAdmin)

关键说明 #

1. 避免模板修改：所有逻辑都在admin.py内完成，利用Django Admin的list_display自定义字段能力，无需改动任何模板文件。
2. 内置图标：使用Django Admin自带的icon-help类图标，无需额外引入外部CSS资源。
3. Tooltip初始化：通过内嵌JS调用Bootstrap的tooltip组件（Django Admin默认集成了jQuery和Bootstrap的tooltip依赖），这是之前输出HTML未生效的核心原因——没有初始化tooltip插件。
4. 内容转义：format_html会自动转义字段内容中的特殊字符（如引号、HTML标签），避免破坏页面结构。

如果需要支持HTML格式的提示内容，只需将tooltip初始化中的html: false改为html: true，同时确保title参数传入的是经过安全处理的HTML（可用mark_safe包裹）。

内容的提问来源于stack exchange，提问作者sundus farooq