[英]Popover not working with button and input tag
我正在尝试在按钮上应用 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);
});
你的代码工作正常。 尝试这个。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.