如何实现Tooltipster工具提示追加内容？解决重复显示问题

Tooltipster完全支持你需要的动态累加工具提示内容的功能，无需直接向元素插入HTML，用它提供的API就能轻松解决重复显示的问题。

实现思路 #

1. 初始化Tooltipster时设置自定义触发方式，初始内容留空；
2. 维护一个数组来记录已点击的按钮文本，避免重复添加；
3. 给两个按钮绑定点击事件，每次点击时检查内容是否已存在，不存在则添加到数组，再更新Tooltipster的内容；
4. 调用Tooltipster的API更新并显示弹窗。

代码示例 #

$(function() {
  // 存储已点击的文本，防止重复添加
  let clickedTexts = [];
  const tooltip = $("#tooltipster");
  
  // 初始化Tooltipster
  tooltip.tooltipster({
    trigger: 'custom',
    side: 'right',
    content: '' // 初始内容为空
  });

  // "hello"按钮点击事件处理
  $('#hello-btn').on('click', function() {
    const text = 'hello';
    if (!clickedTexts.includes(text)) {
      clickedTexts.push(text);
      // 更新tooltip内容，用逗号分隔（也可以用<br>实现换行）
      tooltip.tooltipster('content', clickedTexts.join(', '));
    }
    // 显示工具提示
    tooltip.tooltipster('show');
  });

  // "goodbye"按钮点击事件处理
  $('#goodbye-btn').on('click', function() {
    const text = 'goodbye';
    if (!clickedTexts.includes(text)) {
      clickedTexts.push(text);
      tooltip.tooltipster('content', clickedTexts.join(', '));
    }
    tooltip.tooltipster('show');
  });
});

额外优化（可选） #

如果想要更美观的排版，比如每个内容项换行显示，甚至添加样式，可以将内容转为HTML字符串：

// 生成带样式的HTML内容
const htmlContent = clickedTexts.map(item => `<div class="tooltip-item">${item}</div>`).join('');
tooltip.tooltipster('content', htmlContent);

然后可以在CSS中给.tooltip-item添加间距或样式，提升视觉效果。

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