You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何动态更新Bootstrap Tooltip?重复Tooltip问题求助

问题:动态更新Bootstrap Tooltip title时出现双Tooltip且修改不生效

我尝试动态更新Bootstrap Tooltip的title属性,结果出现了两个Tooltip,而且修改后的title也不生效。

初始段落代码:

<p> Some text </p>

解析标记的JS代码:

$('p').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span data-toggle='translatetip' title='old'>$1</span>"));
});

// 绑定hover事件到每个span
$('p span').hover(
    function() { 
        $('#word').text($(this).css('background-color','#ffff66').text());
        $(this).tooltip('enable').attr('title', 'new');
        console.log($(this).tooltip().attr('title'));
    },
    function() { 
        $('#word').text(''); $(this).css('background-color',''); 
    }
);

这段代码会给段落内的每个单词生成span标签,鼠标悬停时单词高亮并显示Tooltip,但悬停时修改Tooltip文本不仅未生效,还出现了双Tooltip的问题,效果如下:
双Tooltip效果


解决方案

双Tooltip+修改不生效的核心原因是:Bootstrap Tooltip初始化后会缓存原始title值,直接修改DOM的title属性不会同步到Tooltip实例;若重复初始化或触发逻辑混乱,会生成多个Tooltip实例。

按以下步骤修复:

  1. 提前统一初始化Tooltip
    不要在hover事件里才启用Tooltip,生成span后立即完成初始化,避免重复实例:

    $('p').each(function() {
        var $this = $(this);
        $this.html($this.text().replace(/\b(\w+)\b/g, "<span data-toggle='translatetip' title='old'>$1</span>"));
    });
    
    // 一次性初始化所有带translatetip标记的元素
    $('[data-toggle="translatetip"]').tooltip({
        trigger: 'hover',
        placement: 'top' // 可根据需求调整位置
    });
    
  2. 用官方API动态更新Tooltip内容
    Bootstrap Tooltip提供了专属方法更新内容,不要直接修改title属性:

    $('p span').hover(
        function() { 
            $(this).css('background-color','#ffff66');
            $('#word').text($(this).text());
            
            // 获取Tooltip实例并更新内容
            const tooltip = $(this).data('bs.tooltip');
            tooltip.setContent({ '.tooltip-inner': 'new' });
        },
        function() { 
            $('#word').text(''); 
            $(this).css('background-color','');
            // 鼠标移出时隐藏Tooltip
            $(this).tooltip('hide');
        }
    );
    
  3. 清理重复实例(可选)
    如果页面已存在重复Tooltip实例,初始化前先销毁旧实例:

    $('[data-toggle="translatetip"]').tooltip('dispose'); // 销毁旧实例
    $('[data-toggle="translatetip"]').tooltip({...}); // 重新初始化
    

内容的提问来源于stack exchange,提问作者M. Usaid

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.24 22:27:30