Tooltip works properly on local computer but not when uploaded online

I used a similar code as on W3Schools for designing the tooltip, you can find my use here (external link to my site). On my local computer, it works perfectly, as shown here (external link to Vimeo). The first part of the video is my local computer, while the latter part is my website which is linked above. I have uploaded the linked CSS file as well after updating it. I have hosted this for free on GitHub and linked it to Cloudflare Pages, so if that is causing the issue am mentioning it.

Adding bootstrap as a tag since I'm unsure if that is causing any issue, new to coding so adding it. Apologies if it's not the case.

  .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -70px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.random-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<div class=" col-lg-4 col-md-6 col-sm-12 mb-3">
                <div class="card h-100">
                  <img src="..." class="card-img-top" alt="...">
                  <div class="card-body d-flex">
                    <div style="align-self:end;">
                      <div style="width: 80%;">
                        <p class="card-text"><a>Some content here</a></p>
                      </div>
                      <div style="position: relative;">
                        <div style="width: 20%;">
                          <div class="random-tooltip">
                            <button class="btn btn-light"
                              style="border-color:#212529; position:absolute; right:0; bottom:0;" onclick="copyText1()"
                              onmouseout="outFunc1()">
                              <span class="tooltiptext" id="myTooltip1">Copy to clipboard</span>
                              <i class="fa fa-clipboard"></i>
                            </button>
                          </div>
                        </div>
                        <script>
                          function copyText1() {

                            /* Copy text into clipboard */
                            navigator.clipboard.writeText
                              ("XYZ");
                            var tooltip = document.getElementById("myTooltip1");
                            tooltip.innerHTML = "Copied";
                          }
                          function outFunc1() {
                            var tooltip = document.getElementById("myTooltip1");
                            tooltip.innerHTML = "Copy to clipboard";
                          }
                        </script>
                      </div>
                    </div>
                  </div>
                </div>
              </div>