素肌にサスペンダー

個人的な備忘と日記

【BootStrap】今表示しているURLをコピーさせてツールチップを表示させる

HTML JavaScript CSS

BootStrapと、Clipboard.js を使ったサンプル

ボタンをクリックしたら、「URL copied!」にツールチップの表示が変わる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    />
    <title>Copy URL to Clipboard</title>
  </head>
  <body>
    <div class="container">
      <button
        class="btn btn-primary"
        id="copyButton"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="Click to copy URL"
      >
        Copy URL
      </button>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Clipboard.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Initialize tooltip
        var tooltipTriggerList = [].slice.call(
          document.querySelectorAll('[data-bs-toggle="tooltip"]')
        );
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Copy URL to clipboard
        var copyButton = document.getElementById("copyButton");
        copyButton.addEventListener("click", function () {
          var url = window.location.href;

          var clipboard = new ClipboardJS(copyButton, {
            text: function () {
              return url;
            },
          });

          clipboard.on("success", function (e) {
            e.clearSelection();
            copyButton.setAttribute("data-bs-original-title", "URL copied!");
            var tooltip = bootstrap.Tooltip.getInstance(copyButton);
            tooltip.update();
            tooltip.show();
            clipboard.destroy();

            // メッセージの表示時間を設定
            setTimeout(function () {
              copyButton.setAttribute(
                "data-bs-original-title",
                "Click to copy URL"
              );
              tooltip.update();
              tooltip.hide();
            }, 2000);
          });

          clipboard.on("error", function () {
            copyButton.setAttribute(
              "data-bs-original-title",
              "Failed to copy URL. Please manually copy the URL."
            );
            var tooltip = bootstrap.Tooltip.getInstance(copyButton);
            tooltip.update();
            tooltip.show();
            clipboard.destroy();

            // メッセージの表示時間を設定
            setTimeout(function () {
              copyButton.setAttribute(
                "data-bs-original-title",
                "Click to copy URL"
              );
              tooltip.update();
              tooltip.hide();
            }, 2000);
          });

          clipboard.onClick(event);
        });
      });
    </script>
  </body>
</html>