如何在内容复制到剪贴板时显示工具提示？

在前端开发中，可以通过以下步骤实现在内容复制到剪贴板时显示工具提示：

首先，需要使用JavaScript来监听复制事件。可以使用document.execCommand('copy')方法来触发复制操作。
在复制事件中，可以通过创建一个临时的textarea元素，并将要复制的内容设置为其值。
将该textarea元素添加到页面中，并选中其内容。
使用document.execCommand('copy')方法将内容复制到剪贴板。
复制成功后，可以使用工具提示库（如tooltip.js）来显示提示信息。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Copy to Clipboard with Tooltip</title>
  <script src="tooltip.js"></script>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip" onclick="copyToClipboard('Hello World!')">
    Copy to Clipboard
    <span class="tooltiptext">Copied!</span>
  </div>

  <script>
    function copyToClipboard(text) {
      var textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    }
  </script>
</body>
</html>

在上述示例中，我们使用了一个tooltip.js库来实现工具提示的效果。你可以根据实际需求选择合适的工具提示库。

请注意，以上示例中的tooltip.js文件需要在页面中引入，并且需要根据实际情况进行相应的样式调整和功能扩展。