弹出框不适用于按钮和输入标签

Question

I'm trying to apply mouseover event on a button so when you put your mouse on a button, it shows a simple html where you can click a button or tick checkboxes. However, when I tried adding these tags within data attribute, it didn't show any content. Am I using the function in a wrong way?

<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.<button name='button' type='button'>click</button>" </button></label>

$("#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);

});

Answer 1

Your code is work fine. try this.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<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.<button name='button' type='button'>click</button>" </button></label>
                                     <script language="javascript">
                                       //$( document ).ready(function() {
                                       $(function() {
$("#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);
});
                                       })
                                           
</script>