Изменить заголовок всплывающей подсказки Popper.js при нажатии

Question

Клянусь, я искал и не нашел этого вопроса. Извините, если я сделал ошибку!

ВНИМАНИЕ: Я хочу использовать ТОЛЬКО JavaScript! Я не хочу включать библиотеку jQuery! Есть много примеров использования jQuery, но они мне не помогают.

Проблема: я создаю веб-сайт и использую Bootstrap 5 + Popper. У меня есть несколько адресов электронной почты, написанных в содержании. Каждый адрес электронной почты встроен в привязку HTML. Для каждого адреса электронной почты я показываю всплывающую подсказку «Копировать адрес» при наведении на него. Когда нажимается якорный текст (адрес электронной почты), я хочу скопировать адрес электронной почты в буфер обмена, чтобы пользователь мог вставить его в любой клиент электронной почты, который они используют. После нажатия на адрес электронной почты заголовок всплывающей подсказки должен быть изменен на «Скопировано» в качестве подтверждения для пользователя.

HTML код:

      <a href="#" data-bs-toggle="tooltip" title="" data-bs-original-title="Copy address">[e-mail]</a>
...
<!-- This input text field is used to copy the text (E-Mail addresses) via JavaScript -->
<input type="text" id="copy_input" readonly style="position: absolute; left: -9999px;">

Инициализация JavaScript для всплывающей подсказки Popper (точно так же, как на странице Bootstrap для всплывающей подсказки):

      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl);
});

И вот мой код JavaScript, который может копировать адрес электронной почты в буфер обмена, НО НЕ МОЖЕТ изменить заголовок всплывающей подсказки:

      tooltipTriggerList.forEach(function(alink) {
    alink.addEventListener('click', function(e) {
        e.preventDefault();
        const copy_input = document.querySelector('#copy_input');
        copy_input.value = alink.textContent.trim();
        copy_input.select();
        document.execCommand('copy');
        copy_input.value = '';
        alink.setAttribute('data-bs-original-title', 'Copied');
        alink.setAttribute('title', 'Copied');  // just to be sure...
        alink.show();  // I thought show() would re-display the changed title, but no!
    });
});

К сожалению, заголовок всплывающей подсказки не изменяется функцией слушателя выше.

Спасибо за вашу помощь!

Answer 1

Ошибка связана с тем, что метод show должен вызываться для объекта всплывающей подсказки, вставленного в элемент ссылки.

      tooltipTriggerList.forEach(function(alink) {
    alink.addEventListener('click', function(e) {
        e.preventDefault();
        // do the copy logic ....
    
        // change title for tooltip
        alink.setAttribute('data-bs-original-title', 'Copied');
    
        // show the tooltip with the new title
        bootstrap.Tooltip.getInstance(alink).show()
    });
});