彈出框不適用於按鈕和輸入標簽

Question

我正在嘗試在按鈕上應用 mouseover 事件，因此當您將鼠標放在按鈕上時，它會顯示一個簡單的 html，您可以在其中單擊按鈕或勾選復選框。 但是，當我嘗試在 data 屬性中添加這些標簽時，它沒有顯示任何內容。 我是否以錯誤的方式使用該功能？

<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

你的代碼工作正常。 嘗試這個。

<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>