Email with copy option on click

<div style="display: flex; justify-content: center; position: relative; font-size:17px; margin-right:-25px">
  <div class="email-wrapper" style="position: relative; display: inline-flex; align-items: center;">
      <span style="font-weight:700; margin-right:3px; color:#000;">Email </span>
    <a href="mailto:info@helios-creations.ch" id="emailLink" style="color: #d14a3f; font-weight: 300; text-decoration: none;">info@helios-creations.ch</a>
    <button id="copyEmailBtn" style="
      margin-left: 8px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 18px;
      padding:0;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s ease;
    "><img src="https://helios-creations.ch/wp-content/uploads/2025/05/copy.png" alt="copier e-mail" width="26px" height="26px" /></button>

    <div id="copyTooltip" style="
      position: absolute;
      bottom: -125%;
      left: auto;
      right:-25px;
      transform: translateX(-50%);
      background: #D7462B;
      color: #fff;
      padding: 4px 8px;
      border-radius: 0px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
      pointer-events: none;
    ">Copied!</div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const wrapper = document.querySelector('.email-wrapper');
    const copyBtn = document.getElementById("copyEmailBtn");
    const tooltip = document.getElementById("copyTooltip");
    const emailText = document.getElementById("emailLink").textContent;

    // Show copy icon on hover
    wrapper.addEventListener("mouseenter", () => {
      copyBtn.style.visibility = "visible";
      copyBtn.style.opacity = "1";
    });

    wrapper.addEventListener("mouseleave", () => {
      copyBtn.style.visibility = "hidden";
      copyBtn.style.opacity = "0";
    });

    // Copy action
    copyBtn.addEventListener("click", () => {
      navigator.clipboard.writeText(emailText);
      tooltip.style.visibility = "visible";
      tooltip.style.opacity = "1";
      setTimeout(() => {
        tooltip.style.opacity = "0";
        tooltip.style.visibility = "hidden";
      }, 1500);
    });
  });
</script>

<!-- Optional: Load Rubik font from Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">