Как настроить копирование сылки по клику по тексту?

В вашем коде нужно добавить показ короткой всплывающей надписи после успешной записи ссылки в буфер обмена. Делать это нужно именно внутри успешного обработчика navigator.clipboard.writeText, потому что копирование может быть отклонено браузером. Еще у вас в примере есть синтаксическая ошибка: написано then(() = { ... }), а должно быть then(() => { ... }). Также лучше брать ссылку через event.currentTarget, а не через event.target. Если внутри ссылки появится span, иконка или другой вложенный элемент, event.target будет указывать на вложенный элемент, у которого может не быть href.

HTML может быть обычной ссылкой с классом, по которому вы подключаете обработчик:

<a class="copy-link" href="https://example.com/page">Скопировать ссылку</a>

CSS для небольшой подсказки над ссылкой:

.copy-tooltip {
  position: absolute;
  z-index: 9999;
  padding: 6px 10px;
  border-radius: 4px;
  background: #222;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
 
.copy-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript можно сделать так:

function showCopyTooltip(target, text) {
  const oldTooltip = document.querySelector('.copy-tooltip');
 
  if (oldTooltip) {
    oldTooltip.remove();
  }
 
  const tooltip = document.createElement('span');
  const rect = target.getBoundingClientRect();
 
  tooltip.className = 'copy-tooltip';
  tooltip.textContent = text;
  tooltip.style.left = rect.left + window.scrollX + 'px';
  tooltip.style.top = rect.top + window.scrollY - 36 + 'px';
 
  document.body.appendChild(tooltip);
 
  requestAnimationFrame(function () {
    tooltip.classList.add('is-visible');
  });
 
  setTimeout(function () {
    tooltip.classList.remove('is-visible');
    setTimeout(function () {
      tooltip.remove();
    }, 200);
  }, 1000);
}
 
function copyURI(event) {
  event.preventDefault();
 
  const link = event.currentTarget;
  const url = link.getAttribute('href');
 
  navigator.clipboard.writeText(url).then(function () {
    showCopyTooltip(link, 'Скопировано');
  }).catch(function () {
    showCopyTooltip(link, 'Не удалось скопировать');
  });
}
 
document.querySelectorAll('.copy-link').forEach(function (link) {
  link.addEventListener('click', copyURI);
});

Такой вариант создает подсказку только после успешного копирования, показывает ее примерно на одну секунду и затем удаляет из DOM. Если пользователь быстро нажмет несколько раз, старая подсказка сначала удалится, поэтому надписи не будут копиться на странице. Clipboard API нормально работает на HTTPS-страницах и на localhost. На обычном HTTP браузер может запретить запись в буфер, и тогда сработает ветка с ошибкой. Если вам нужна поддержка очень старых браузеров, потребуется отдельный fallback через временное поле textarea и document.execCommand, но для современных сайтов обычно достаточно navigator.clipboard.

• Показывайте надпись после успешного then, а не сразу при клике.
• Используйте event.currentTarget, чтобы получать именно ссылку.
• Учитывайте, что Clipboard API требует безопасный контекст: HTTPS или localhost.
• Удаляйте подсказку после таймера, чтобы не засорять DOM.