如何结合Bootstrap 5.2 Tooltip与Clipboard.js 2.0实现复制反馈？

为什么旧示例失效？ #

主要是两个核心依赖的版本迭代导致API不兼容：

• Clipboard.js 版本差异：旧示例基于早期的Clipboard.js v1.x，新版（v2+）虽然核心复制逻辑变化不大，但事件回调的参数处理、实例化细节有调整，比如旧版中直接取复制文本的方式，在新版中需要通过event.text获取；另外，新版对DOM元素的绑定逻辑也有细微调整。
• Bootstrap 彻底移除jQuery依赖：旧示例大概率用的是Bootstrap 3或4，这两个版本依赖jQuery来初始化Tooltip等组件，而Bootstrap 5+完全改用原生JavaScript实现组件，旧示例里的$(element).tooltip('show')、$(element).attr()这类jQuery写法在新版中直接无法运行。

适配最新版的实现代码 #

HTML结构 #

<!-- 每个复制按钮通过data-clipboard-text存储要复制的静态文本 -->
<button class="copy-btn" data-clipboard-text="文本内容1" data-bs-toggle="tooltip" data-bs-title="点击复制">复制文本1</button>
<button class="copy-btn" data-clipboard-text="文本内容2" data-bs-toggle="tooltip" data-bs-title="点击复制">复制文本2</button>

JavaScript代码（兼容Clipboard.js v2+ 和 Bootstrap 5+） #

// 初始化Clipboard.js实例
const clipboard = new ClipboardJS('.copy-btn');

// 批量初始化Bootstrap Tooltip
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
  new bootstrap.Tooltip(el);
});

// 复制成功的反馈逻辑
clipboard.on('success', function(e) {
  const btn = e.trigger;
  const tooltip = bootstrap.Tooltip.getInstance(btn);
  
  // 修改提示文本并显示
  tooltip.setContent({ '.tooltip-inner': '复制成功！' });
  tooltip.show();
  
  // 2秒后恢复原提示并隐藏
  setTimeout(() => {
    tooltip.setContent({ '.tooltip-inner': btn.getAttribute('data-bs-original-title') || '点击复制' });
    tooltip.hide();
  }, 2000);
  
  // 清除Clipboard.js默认选中的文本
  e.clearSelection();
});

// 复制失败的反馈（可选）
clipboard.on('error', function(e) {
  const btn = e.trigger;
  const tooltip = bootstrap.Tooltip.getInstance(btn);
  
  tooltip.setContent({ '.tooltip-inner': '复制失败，请手动复制' });
  tooltip.show();
  
  setTimeout(() => {
    tooltip.setContent({ '.tooltip-inner': btn.getAttribute('data-bs-original-title') || '点击复制' });
    tooltip.hide();
  }, 2000);
});

关键说明 #

• 用data-clipboard-text直接定义要复制的静态文本，完全匹配需求；
• Bootstrap 5的Tooltip必须通过原生JS实例化，不能再用jQuery的方式调用；
• Clipboard.js的事件回调中，通过e.trigger获取触发按钮，再操作对应的Tooltip实例实现反馈；
• 实现了自动恢复原提示的逻辑，避免用户看到错误的提示内容。

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