如何动态更新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+修改不生效的核心原因是:Bootstrap Tooltip初始化后会缓存原始title值,直接修改DOM的title属性不会同步到Tooltip实例;若重复初始化或触发逻辑混乱,会生成多个Tooltip实例。
按以下步骤修复:
提前统一初始化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' // 可根据需求调整位置 });用官方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'); } );清理重复实例(可选)
如果页面已存在重复Tooltip实例,初始化前先销毁旧实例:$('[data-toggle="translatetip"]').tooltip('dispose'); // 销毁旧实例 $('[data-toggle="translatetip"]').tooltip({...}); // 重新初始化
内容的提问来源于stack exchange,提问作者M. Usaid
相关产品推荐
相关产品推荐

