I am working on some enhancements on a website. Need to implement a functionality called ‘Copy to Clipboard’. I am using bootstrap 5. I have copied the code from w3schools examples.
But when i am keeping the button inside the tooltip div, it is not displaying the button, if i keep it outside, it will display the button but tooltip is not showing. Please find my code below. Appreciate help on this.

index.cshtml

<div class="tooltip"></div>
<button class="btn btn-primary btn-sm ml-3" id="btncopyid">                                                     
    <em data-feather="copy" class="feather-14"></em>
    <span class="tooltiptext" id="copytoclipboard">Click To Copy</span>
</button>

index.js

    $("#btncopyid").on("click", function () {
       copyToClipboard(lblId);
    });
    $("#btncopyid").mouseout(function () {
      outFunc();
   });

    function copyToClipboard(e) {
         var t = $("<input>"); $("body").append(t),
             t.val($(e).text().trim()).select(),
             document.execCommand("copy"),
             t.remove()
    
         var tooltip = document.getElementById("copytoclipboard");
         tooltip.innerHTML = "Copied : " + $(e).text().trim();
     }
    
     function outFunc() {
         var tooltip = document.getElementById("copytoclipboard");
         tooltip.innerHTML = "Click To Copy";
     }

index.css

.tooltip {
    display: inline-block;
    position: relative;
}

    .tooltip .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: -75px;
        opacity: 0;
        transition: opacity 0.3s;
    }

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

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