Bootstrap Tooltip在DataTable初始隐藏列中不生效的修复方案

• Tooltip初始化时机错误：代码中$('[data-toggle="tooltip"]').tooltip()在DataTable初始化完成后立刻执行，此时配置为隐藏的列对应的单元格已被DataTable移出DOM渲染树，jQuery选择器无法选中这些元素，自然不会为其绑定Tooltip的事件监听。
• Bootstrap Tooltip初始化时会将元素原生title属性的值缓存到实例中，同时移除原生title属性，避免触发浏览器默认提示。未被初始化的隐藏列单元格始终保留原生title属性，当用户切换列可见性后，DataTable会将这些未初始化的单元格重新插入DOM，此时这些元素没有绑定Bootstrap Tooltip的监听事件，悬停时就只会弹出浏览器原生的title提示。

可根据实际业务场景二选一：

方案1：监听列可见性事件，按需初始化新显示列的Tooltip #

该方案性能开销小，适合表格交互少、数据量固定的场景，仅在列切换时执行一次初始化逻辑：

$(document).ready(function() {
    if ($('.dataTable').length > 0) {
        // 保存DataTable实例，方便后续调用
        const table = $('.dataTable').DataTable({
            lengthMenu: [[5, 10, 25, 50, 75, 100, -1], [5, 10, 25, 50, 75, 100, "ALLE"]],
            pageLength: 10,
            dom: 'Blfrtip',
            buttons: [
                'colvis'
            ],
            columnDefs: [
                {
                    targets: "hidden",
                    visible: false
                }
            ]
        });

        // 初始化页面首次加载时可见单元格的Tooltip
        table.$('[data-toggle="tooltip"]').tooltip();

        // 监听DataTable列可见性切换事件
        table.on('column-visibility.dt', function(e, settings, columnIdx, isVisible) {
            // 仅当列从隐藏切换为显示时，初始化该列下的Tooltip
            if (isVisible) {
                table.column(columnIdx).nodes().to$().find('[data-toggle="tooltip"]').tooltip();
            }
        });
    }
});

方案2：事件委托全局初始化Tooltip #

该方案适配性更强，不需要额外监听DataTable事件，可同时覆盖列切换、分页、搜索过滤、动态新增行等所有DOM变动场景，适合表格动态交互多的场景：

$(document).ready(function() {
    if ($('.dataTable').length > 0) {
        $('.dataTable').DataTable({
            lengthMenu: [[5, 10, 25, 50, 75, 100, -1], [5, 10, 25, 50, 75, 100, "ALLE"]],
            pageLength: 10,
            dom: 'Blfrtip',
            buttons: [
                'colvis'
            ],
            columnDefs: [
                {
                    targets: "hidden",
                    visible: false
                }
            ]
        });
    }

    // 将Tooltip初始化事件委托给表格父元素，鼠标悬停时动态初始化
    $('.dataTable').on('mouseenter', '[data-toggle="tooltip"]', function() {
        // 加判断避免重复初始化
        if (!$(this).data('bs.tooltip')) {
            $(this).tooltip();
        }
    });
});

额外注意：提供的复现代码存在重复引入资源的问题：重复加载了2次jQuery、2次DataTables核心JS、2次Buttons插件CSS，实际开发时需要删除重复引入的资源，避免产生不可预期的冲突。

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