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);
});
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>