I'm making an mouse over event over on an icon which bascially shows a checkbox. I tried making a popover with the data-content attribute, but it didn't work with when I tried replacing the a tag with input tag.

<div class="form-group col-2" >
    <label for="form-realname" class="d-flex align-items-center">test<button class="fa fa-info-circle ms-auto" aria-hidden="true" id="pop" data-html="true" data-content="The message is here.
    <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>" ></button></label>
</div>


<script>
$("#pop").popover({ trigger: "manual" , html: true, animation:false})
.on("mouseenter", function () {
    let content = this;
    $(content).popover("show");
    $(".popover").on("mouseleave", function () {
        $(content).popover('hide');
    });
}).on("mouseleave", function () {
let content = this;
setTimeout(function () {
    if (!$(".popover:hover").length) {
        $(content).popover("hide");
    }
}, 300);

});