如何在JavaScript实现的复制功能成功时显示提示框（Tooltip）

Hey there! Awesome work getting the copy feature up and running—adding a tooltip will make the user experience feel much more polished. Let's implement this together with just a few additions to your existing code.

Step 1: Add the Tooltip Element to Your HTML #

First, we'll add a tooltip container inside your existing copy-emoji-section to hold the "内容已复制" message. We'll keep it hidden by default:

<div class="copy-emoji-section">
  <p class="emoji-copy-text" id="">Copy Emoji</p>
  <p class="emoji-copy" id="emoji_copy">😀</p>
  <button class="emoji-copy-button" id="emoji_copy_button">Copy Emoji</button>
  <!-- 新增提示框元素 -->
  <p class="copy-tooltip">内容已复制</p>
</div>

Step 2: Style the Tooltip with CSS #

Next, let's add some CSS to make the tooltip look clean and position it properly below the button. We'll set it to hidden by default, then show it when needed:

.copy-emoji-section {
  position: relative; /* 让提示框相对于这个容器定位 */
}

.copy-tooltip {
  display: none; /* 默认隐藏 */
  position: absolute;
  bottom: -30px; /* 放在按钮下方 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  margin: 0;
}

/* 可选：给提示框加个小箭头 */
.copy-tooltip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}

Step 3: Update Your JavaScript to Show/Hide the Tooltip #

Finally, modify your JavaScript code to display the tooltip when the copy is successful, then automatically hide it after a couple of seconds:

<script>
var copyEmailBtn = document.querySelector('.emoji-copy-button');
// 获取提示框元素
var copyTooltip = document.querySelector('.copy-tooltip');

copyEmailBtn.addEventListener('click', function(event) {
 var emailLink = document.querySelector('.emoji-copy');
 var range = document.createRange();
 range.selectNode(emailLink);
 window.getSelection().addRange(range);

 try {
 var successful = document.execCommand('copy');
 var msg = successful ? 'successful' : 'unsuccessful';
 console.log('Copy email command was ' + msg);

 // 复制成功时显示提示框
 if (successful) {
   copyTooltip.style.display = 'block';
   // 2秒后自动隐藏提示框
   setTimeout(function() {
     copyTooltip.style.display = 'none';
   }, 2000);
 }
 } catch(err) {
 console.log('Oops, unable to copy');
 }

 window.getSelection().removeAllRanges();
});
</script>

How It Works #

• The CSS positions the tooltip relative to the parent container so it stays aligned with the button.
• When the copy is successful, we toggle the tooltip's display to block to show it.
• The setTimeout function ensures the tooltip disappears after 2 seconds, so it doesn't clutter the UI permanently.

You can tweak the CSS (colors, padding, position) to match your project's design, and adjust the timeout duration if you want the tooltip to stay visible longer or shorter.

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