移除DOM元素时如何正确清除Bootstrap 4 Tooltip

问题 #

在Bootstrap 4项目中实现了实时搜索框，搜索结果用Tooltip显示超出区域的长描述。用jQuery编写脚本，在搜索框清空（调用html('')）或点击关闭按钮时隐藏结果及父元素，但如果光标正停留在结果元素上，Tooltip不会随DOM元素一同移除。

尝试在移除DOM前调用hide和dispose方法清除Tooltip，但未生效，搜索结果更新（用户输入更多字符）时也存在同样问题。

搜索框处理脚本 #

//script to hide the search when the text box is emptied of text.
$(document).ready(function(){

    $('#liveSearch').on('keyup', function(){
        var searchstring = $(this).val();
        if (searchstring.length == 0 ){
            $('.quick-search-result').each(function() {
                $('[data-toggle="tooltip"]').tooltip('hide');
                $(this).tooltip('dispose');
                $(this).remove();
              });
            $('[data-toggle="tooltip"]').tooltip('dispose');
            $('.searchresults').hide();
            $('#searchresults').html('')
        }
    })
});

Tooltip初始化脚本 #

$(document).tooltip({selector: '[data-toggle="tooltip"]'});

原因与解决方法 #

问题原因 #

你使用的是委托式Tooltip初始化（通过document绑定selector参数），这种方式下，Tooltip实例是绑定在document节点上的，而非单个搜索结果元素。因此直接调用单个元素的tooltip('dispose')不会生效——这些元素本身并没有绑定独立的Tooltip实例，实例归属在document上。

另外，当光标停留在结果元素上时，Tooltip已被触发显示，此时直接移除DOM元素，Bootstrap的Tooltip不会自动感知到元素已被删除，因此会残留页面上。

解决步骤 #

1. 先全局隐藏所有显示的Tooltip，再销毁document上的委托实例；
2. 处理DOM元素的移除与容器隐藏；
3. 重新初始化委托式Tooltip，确保后续新生成的搜索结果能正常触发Tooltip。

修改后的搜索框处理脚本：

$(document).ready(function(){
    $('#liveSearch').on('keyup', function(){
        var searchstring = $(this).val();
        if (searchstring.length == 0 ){
            // 1. 隐藏所有已显示的Tooltip
            $('[data-toggle="tooltip"]').tooltip('hide');
            // 2. 销毁document上的委托Tooltip实例
            $(document).tooltip('dispose');
            // 3. 清理搜索结果DOM并隐藏容器
            $('.quick-search-result').remove();
            $('.searchresults').hide();
            $('#searchresults').html('');
            // 4. 重新初始化委托式Tooltip，保证后续搜索结果正常使用
            $(document).tooltip({selector: '[data-toggle="tooltip"]'});
        }
    })
});

额外优化点 #

• 避免重复DOM遍历：原代码在each循环中重复全局查找[data-toggle="tooltip"]，统一处理即可；
• 搜索结果更新场景（用户输入更多字符）：同样需要先执行Tooltip的销毁与重新初始化步骤，确保旧Tooltip被完全清理。

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