如何使用Clipboard.js 2.0和Bootstrap 5.2工具提示？

我不是一个javascript/bootstrapMaven，但我会尝试分享我的一点经验。我认为问题可能在于jQuery依赖的Bootstrap 3和4，因为参考页面上的脚本与工具提示是用jQuery写的，Bootstrap 5和更高版本现在使用Vanilla Javascript，脚本不会运行，直到你添加jQuery依赖到主项目，你可以看到我的项目的一个片段，其中jQuery，ClipboardJS和Bootstrap 5.2都工作得很好+我也添加了一些CSS和动画，我没有发现任何冲突，希望这能有所帮助。请在这里检查Bootstrap 5.2 with jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
    </script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,700&display=swap"
    rel="stylesheet">
  <title>Bootstrap 5.2 and tooltips jQuery</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

  <link rel="canonical" href="https://www.google.com">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <style>
    body {
      font-family: 'Amaranth', sans-serif;
      background: url(https://images.pexels.com/photos/531602/pexels-photo-531602.jpeg) no-repeat center center fixed;
      -webkit-background-size: cover;
      background-size: cover;
      overflow: auto;
      opacity: 99%;
      overflow-x: hidden;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;

    }



    button {
      margin: 20px;
    }

  

   
    .btn-5 {
      width: 47px;
      height: 40px;
      line-height: 42px;
      padding: 0;
      border: none;
      background: rgb(255, 27, 0);
      background: linear-gradient(0deg, rgba(255, 27, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
    }

    .btn-5:hover {
      color: #f0094a;
      background: transparent;
      box-shadow: none;
    }

    .btn-5:before,
    .btn-5:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 2px;
      width: 0;
      background: #f0094a;
      box-shadow:
        -1px -1px 5px 0px #fff,
        7px 7px 20px 0px #0003,
        4px 4px 5px 0px #0002;
      transition: 400ms ease all;
    }

    .btn-5:after {
      right: inherit;
      top: inherit;
      left: 0;
      bottom: 0;
    }

    .btn-5:hover:before,
    .btn-5:hover:after {
      width: 100%;
      transition: 800ms ease all;
    }    
    
    .btn-11 {
      width: 47px;
      height: 40px;
      line-height: 42px;
      padding: 0;
      border: none;
      background: rgb(232, 120, 9);
      background: linear-gradient(0deg, rgb(233, 106, 15) 0%, rgb(193, 130, 35) 100%);
    }

    .btn-11:hover {
      color: #ff8000;
      background: transparent;
      box-shadow: none;
    }

    .btn-11:before,
    .btn-11:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 2px;
      width: 0;
      background: #ff8000;
      box-shadow:
        -1px -1px 5px 0px #fff,
        7px 7px 20px 0px #0003,
        4px 4px 5px 0px #0002;
      transition: 400ms ease all;
    }

    .btn-11:after {
      right: inherit;
      top: inherit;
      left: 0;
      bottom: 0;
    }

    .btn-11:hover:before,
    .btn-11:hover:after {
      width: 100%;
      transition: 800ms ease all;
    }

    .btn-14 {
      background: rgb(255, 151, 0);
      border: none;
      z-index: 1;
    }

    .btn-14:after {
      position: absolute;
      content: "";
      width: 100%;
      height: 0;
      top: 0;
      left: 0;
      z-index: -2;
      border-radius: 5px;
      background-color: #eaf818;
      background-image: linear-gradient(315deg, #e0f00c 0%, #07f5e5 25%, #0f7fc9 74%, #e10cf0 81%);
      box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
      transition: all 0.3s ease;
    }

    .btn-14:hover {
      color: #000;
    }

    .btn-14:hover:after {
      top: auto;
      bottom: 0;
      height: 100%;
    }

    .btn-14:active {
      top: 2px;
    }

    /* 15 */
    .btn-15 {
      background: #b621fe;
      border: none;
      z-index: 1;
    }

    .btn-15:after {
      position: absolute;
      content: "";
      width: 0;
      height: 100%;
      top: 0;
      right: 0;
      z-index: -1;
      background-color: #663dff;
      border-radius: 5px;
      box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
      transition: all 0.3s ease;
    }

    .btn-15:hover {
      color: #fff;
    }

    .btn-15:hover:after {
      left: 0;
      width: 100%;
    }

    .btn-15:active {
      top: 2px;
    }  

    .alfredo {
      background-color: #eaf818;
      background-image: linear-gradient(315deg, #e0f00c 0%, #07f5e5 25%, #0f7fc9 74%, #e10cf0 81%);
    }

    .alfredo2 {
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
      height: 100vh;
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .css-selector {
      background: linear-gradient(90deg, #33f8a8, #33a3f8, #da1ebd, #21bae3, #7023a7);
      background-size: 1000% 1000%;

      -webkit-animation: Alfredo 2s ease infinite;
      animation: Alfredo 2s ease infinite;
    }

    @-webkit-keyframes Alfredo {
      0% {
        background-position: 0% 51%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 51%
      }
    }

    @keyframes Alfredo {
      0% {
        background-position: 0% 51%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 51%
      }
    }
    

    .urgent {
      color: #ff8000;
    }

    .urgent2 {
      background-color: #ff8000
    }

    .purple {
      color: #7F00FF;
    }

    .pink {
      color: #BF40BF;
    }
    .card {
      border: none;
      height: auto;
    }

    .copy-button {
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative
    }

    .tip {
      background-color: #ff8000;
      padding: auto;
      line-height: 25px;
      position: absolute;
      border-radius: 4px;
      z-index: 100;
      color: #fff;
      font-size: 14px;
      animation-name: tip;
      animation-duration: .6s;
      animation-fill-mode: both
    }

    .tip:before {
      content: "";
      background-color: #ff8000;
      height: 10px;
      width: 10px;
      display: block;
      position: absolute;
      transform: rotate(45deg);
      top: -4px;
      left: 17px
    }

    #copied_tip {
      animation-name: come_and_leave;
      animation-duration: 1s;
      animation-fill-mode: both;
      bottom: -35px;
      left: 2px
    }  
    .copy {
      display: flex;
      align-items: center;
      justify-content: start;
    }
    .copied {
      visibility: hidden;
      margin-top: var(--button-content-spacing-px);
    }  

  </style>
</head>

<body>
  <main class="container-fluid">  
     <div class="container-fluid" id="section1">
      <p style="padding-top: 4em;">
      <div class="p-4 p-md-5 mb-4 beta rounded-3 z bg-gradient pt-5">
        <div class="col px-0">     
        <nav class="navbar text-bg-dark">           
        <div class="d-flex justify-content-between align-items-center mb-3 text-bg-dark "> <span
                    class="text-line ms-3 text-bg-dark">This button will copy red fruits name on the clipboard</span> <button
                    onclick="copy('Apple,apple,apple and strawberries!','#copy_button_1')"
                    id="copy_button_1" class="btn btn-sm  btn-15 copy-button">Copy</button> </div>
                <div class="d-flex justify-content-between align-items-center mb-3 text-bg-dark"> <span
                    class="text-line ms-3 text-bg-dark">This button copies some yellow fruits on the clipboard</span>
                  <button
                    onclick="copy('Banana banana and pineapple.','#copy_button_2')"
                    id="copy_button_2" class="btn btn-sm btn-5 copy-button"><svg xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-copy" width="48" height="48" viewBox="0 0 24 24"
                      stroke-width="2" stroke="#ff8000" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <rect x="8" y="8" width="12" height="12" rx="2" />
                      <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
                    </svg>Copy</button>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3 text-bg-dark"> <span
                    class="text-line ms-3">This button will copy a lorem  name on the clipboard</span> <button
                    onclick="copy('Duis aute irure dolor in reprehenderit in voluptate velit','#copy_button_3')"
                    id="copy_button_3" class="btn btn-sm css-selector copy-button"><svg
                      xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                      class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
                      <path
                        d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z" />
                      <path
                        d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z" />
                    </svg>Copy</button> </div>
                <div class="d-flex justify-content-between align-items-center mb-3 text-bg-dark"> <span
                    class="text-line ms-3 ">This button will copy a lorem name on the clipboard </span> <button
                    onclick="copy('I am a cloudy button ','#copy_button_4')" id="copy_button_4"
                    class="btn btn-sm btn-11 alfredo2 copy-button"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                      height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
                      <path
                        d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z" />
                      <path
                        d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z" />
                    </svg> Copy</button> </div>
                <div class="d-flex justify-content-between align-items-center mb-3 text-bg-dark"> <span
                    class="text-line ms-3">This button will copy a lorem name on the clipboard</span>
                  <button
                    onclick="copy('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod','#copy_button_5')"
                    id="copy_button_5" class="btn btn-sm btn-14 copy-button"><svg xmlns="http://www.w3.org/2000/svg"
                      width="16" height="16" fill="currentColor" class="bi bi-clipboard-check" viewBox="0 0 16 16">
                      <path fill-rule="evenodd"
                        d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
                      <path
                        d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                      <path
                        d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                    </svg>Copy</button>
                </div>

              </div>

          </div>
        </div>
      </div>
      </nav>
      <br>

  </main>
  
  <script>
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
      .forEach(tooltip => {
        new bootstrap.Tooltip(tooltip)
      })
  </script>
  <script>
    function copy(text, target) {
      setTimeout(function () {
        $('#copied_tip').remove();
      }, 800);
      $(target).append("<div class='tip' id='copied_tip'>Copied!</div>");
      var input = document.createElement('input');
      input.setAttribute('value', text);
      document.body.appendChild(input);
      input.select();
      var result = document.execCommand('copy');
      document.body.removeChild(input)
      return result;

    }
  </script>
 
  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
  integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>

</html>
如何使用Clipboard.js 2.0和Bootstrap 5.2工具提示？

1条答案

相关问题

热门标签

最新问答
