使用JavaScript移除Bootstrap Tooltip属性失效问题排查

你的代码存在几个关键问题导致Tooltip无法正确移除：

• 每次鼠标悬停都会重复绑定mouseleave事件，且重复创建Tooltip实例
• 移除逻辑错误：没有获取已存在的Tooltip实例就尝试销毁，反而重新创建了新实例
• 未判断元素是否已初始化Tooltip，导致重复添加属性和实例

下面是修正后的代码：

'use strict'

document.addEventListener("DOMContentLoaded", function () {
    // 获取元素样式属性
    const getfont = (element, property) => {
        return window.getComputedStyle(element, null).getPropertyValue(property)
    }

    // 获取元素ID
    const getId = (obj) => {
        return obj.id
    }

    // 添加Tooltip
    const addTooltip = (element) => {
        // 先判断是否已有Tooltip实例，避免重复初始化
        const existingTooltip = bootstrap.Tooltip.getInstance(element);
        if (existingTooltip) return;

        element.setAttribute("data-bs-toggle", "tooltip")
        element.setAttribute("data-bs-placement", "bottom")
        element.setAttribute("data-bs-title", "Tooltip on top")
        
        const tooltip = new bootstrap.Tooltip(element)
        console.log(`Tooltip added`)

        // 绑定mouseleave事件，执行后自动移除监听
        const handleMouseLeave = (event) => {
            const target = event.target
            const tooltipInstance = bootstrap.Tooltip.getInstance(target);
            
            if (tooltipInstance) {
                tooltipInstance.dispose(); // 销毁Tooltip实例
                // 移除相关属性
                target.removeAttribute("data-bs-toggle");
                target.removeAttribute("data-bs-placement");
                target.removeAttribute("data-bs-title");
                console.log(`Tooltip removed`)
            }
            target.removeEventListener("mouseleave", handleMouseLeave);
        }

        element.addEventListener("mouseleave", handleMouseLeave)
    }

    // 合并mouseover事件监听，避免重复绑定
    document.addEventListener("mouseover", (event) => {
        const element = event.target
        const id = getId(element)
        if (id) {
            console.log(id);
            addTooltip(element)
            // console.log(getfont(element, "font-family"))
        }
    })
})

关键修改说明： #

• 避免重复初始化：添加Tooltip前通过bootstrap.Tooltip.getInstance(element)检查是否已有实例，存在则直接返回
• 正确销毁实例：移除时先获取已存在的Tooltip实例，调用官方dispose()方法销毁
• 避免重复绑定事件：在mouseleave事件处理完成后移除该监听，防止多次绑定导致逻辑混乱
• 合并事件监听：将两个mouseover事件合并为一个，减少不必要的事件绑定

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